// This stylesheet provides the structural CSS for dgrid
|
.dgrid {
|
position: relative;
|
overflow: hidden; // This is needed by IE to prevent crazy scrollbar flashing
|
border: 1px solid #ddd;
|
height: 30em;
|
display: block;
|
}
|
|
.dgrid-header {
|
background-color: #eee;
|
}
|
|
.dgrid-header-row {
|
position: absolute;
|
right: 17px; // scrollbar width; revised in List.js if necessary
|
left: 0;
|
}
|
|
.dgrid-header-scroll {
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
|
.dgrid-footer {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
}
|
|
.dgrid-header-hidden {
|
// Used to "hide" header, without losing size information for reference.
|
// !important is used to supersede theme styles at higher specificity.
|
// Left/right box styles are untouched, as they may influence width of
|
// .dgrid-content as updated in Grid's resize method.
|
|
font-size: 0; // allow shrinkage in IE Quirks mode for Lists
|
height: 0 !important;
|
border-top: none !important;
|
border-bottom: none !important;
|
margin-top: 0 !important;
|
margin-bottom: 0 !important;
|
padding-top: 0 !important;
|
padding-bottom: 0 !important;
|
}
|
|
.dgrid-footer-hidden {
|
// Hiding footer is much simpler; simply set its display to none.
|
display: none;
|
}
|
|
.dgrid-sortable {
|
cursor: pointer;
|
}
|
.dgrid-header, .dgrid-header-row, .dgrid-footer {
|
overflow: hidden;
|
background-color: #eee;
|
}
|
|
.dgrid-row-table {
|
border-collapse: collapse;
|
border: none;
|
table-layout: fixed;
|
empty-cells: show;
|
width: 100%;
|
height: 100%;
|
}
|
.dgrid-cell {
|
padding: 3px;
|
text-align: left;
|
overflow: hidden;
|
vertical-align: top;
|
border: 1px solid #ddd;
|
border-top-style: none;
|
box-sizing: border-box;
|
}
|
|
.dgrid-content {
|
position: relative;
|
height: 99%;
|
}
|
|
.dgrid-scroller {
|
overflow-x: auto;
|
overflow-y: scroll;
|
position: absolute;
|
top: 0px;
|
margin-top: 25px; // this will be adjusted programmatically to fit below the header
|
bottom: 0px;
|
width: 100%;
|
}
|
|
.dgrid-preload {
|
// Force IE6 to honor 0 height
|
font-size: 0;
|
line-height: 0;
|
}
|
|
.dgrid-loading {
|
position: relative;
|
height: 100%;
|
}
|
.dgrid-above {
|
position: absolute;
|
bottom: 0;
|
}
|
|
.ui-icon {
|
width: 16px;
|
height: 16px;
|
background-image: url('images/ui-icons_222222_256x240.png');
|
}
|
|
// Single Sort
|
.dgrid-sort-arrow {
|
background-position: -64px -16px;
|
display: block;
|
float: right;
|
margin: 0 4px 0 5px;
|
height: 12px;
|
}
|
.dgrid-sort-up .dgrid-sort-arrow {
|
background-position: 0px -16px;
|
}
|
|
.dgrid-selected {
|
background-color: #bbb;
|
}
|
|
.dgrid-input {
|
width: 99%;
|
}
|
|
html.has-mozilla .dgrid {
|
// Fix: Firefox's focus outline doesn't work by default for divs prior to actually tabbing into it
|
.dgrid-row:focus,
|
.dgrid-cell:focus {
|
outline: 1px dotted;
|
}
|
}
|
|
html.has-mozilla .dgrid-focus {
|
// Tighten outline to fit within cells (avoids cutting off top/bottom outlines)
|
outline-offset: -1px;
|
}
|
|
// Used by List.js to calculate width/height of scrollbars
|
.dgrid-scrollbar-measure {
|
width: 100px;
|
height: 100px;
|
overflow: scroll;
|
position: absolute;
|
top: -9999px;
|
}
|
|
// Styles for auto-height grids; simply add the dgrid-autoheight class
|
.dgrid-autoheight {
|
height: auto;
|
}
|
.dgrid-autoheight .dgrid-scroller {
|
position: relative;
|
overflow-y: hidden;
|
}
|
.dgrid-autoheight .dgrid-header-scroll {
|
display: none;
|
}
|
.dgrid-autoheight .dgrid-header {
|
right: 0;
|
}
|
