knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#116,view/grid][m]: fixed header on grid table so you can scroll and header stays fixed - fixes #116.

Browse Source 
* [s] in changes by [m] in effort
* pretty painful to do and we now have to set width of columns explicitly - though this will be useful going forward if we allow adjustable width columns.
* even support different width scrollbars in different browsers (have not tested in IE though!)
* remaining bug is that we have an overhang in header when no scrollbar for body (probably not that hard to fix ...)
This commit is contained in:
Rufus Pollock
2012-05-17 13:22:42 +01:00
parent 310a008537
commit 7963dc2a09
2 changed files with 91 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
css/grid.css
View File

@@ -2,20 +2,22 @@
* (Data) Grid
*********************************************************/
table.recline-grid {
table-layout: fixed;
width: 100%;
}
.recline-grid .btn-group .dropdown-toggle {
padding: 1px 3px;
line-height: auto;
}
.recline-grid {
border: 1px solid #ccc;
width: 100%;
}
.recline-grid td, .recline-grid th {
border-left: 1px solid #ccc;
padding: 3px 4px;
text-align: left;
word-wrap: break-word;
white-space: normal;
}
.recline-grid td {
@@ -26,6 +28,14 @@
width: 20px;
}
.recline-grid tbody tr:last-child {
border-bottom: 1px solid #ccc;
}
.recline-grid tbody td:last-child {
border-right: 1px solid #ccc;
}
/* direct borrowing from twitter buttons */
.recline-grid th,
.transform-column-view .expression-preview-table-wrapper th
@@ -53,6 +63,42 @@
transition: 0.1s linear all;
}
/**********************************************************
* Fixed Header - http://www.imaputz.com/cssStuff/bigFourVersion.html
*********************************************************/
div.table-container {
overflow: auto;
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.table-container {
overflow: hidden;
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of table-container has an overflow property set to auto */
thead.fixed-header tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixed-header tr {
display: block
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
tbody.scrollContent {
display: block;
max-height: 500px;
overflow: auto;
}
/**********************************************************
* Data Table Menus