Deep Tailor b8f278cabf [Tables] - Sticky headers (#2071)
* first revision

* [Frontend] Styling for sticky table headers

Fixes #1481
- WIP convert mct-table layout to use flex;
- TODO: fix flex layout when a small number of rows;
- Rename CSS classes used as selectors by JS;

* remove header height from calculations since it is outside in its own table now

* [Frontend] Styling for sticky table headers

Fixes #1481
- Fixed flex layout when a small number of rows;
- Refined input padding and dropshadow for more compactness;

* fix tests and verify tables works properly in layout and large view

* add mct-scroll to header table to allow scrolling in sync with the rest of mct-table

* Various fixes and polishing

Fixes #2071
- Fix headers height issue;
- Move inline styles to classes;
- First round fix for horz overflow due to scrollbar problem;

* WIP horz overflow

Fixes #2071
- Commented out CSS-based scrollbar with approach in
anticipation of better JS solution;

* Horz overflow/scrollbar problem fixed

Fixes #2071
- Added calcTableWidthPx to allow sizing-table to subtract
width of scrollbar;

* Remove commented code

* add clear icon back into filter text boxes

* Polishing on sticky table headers filtering

Fixes #1481
Fixes #2071
- Now hides the magnify glass in table header filters when typing;
2018-06-29 11:38:18 -07:00

68 lines
2.2 KiB
SCSS

/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
mct-table {
.mct-sizing-table {
z-index: -1;
visibility: hidden;
position: absolute !important;
//Add some padding to allow for decorations such as limits indicator
td {
padding-right: 15px;
padding-left: 10px;
white-space: nowrap;
}
}
.mct-table {
thead {
display: block;
tr {
display: block;
white-space: nowrap;
th {
display: inline-block;
box-sizing: border-box;
}
}
}
tbody {
tr {
position: absolute;
white-space: nowrap;
display: block;
}
td {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-block;
}
}
}
.l-control-bar {
margin-bottom: 3px;
}
}