Atualizando grid v1 para chrome/firefox 4+
Para que sua grid apareça no Google Chrome, é necessario que seja alterada no arquivo 'grid.js' a classe:
"ComputedCSSStyleDeclaration"
para
"CSSStyleDeclaration".
Apenas esta modificação vai permitir que ele seja exibido pelo chrome, mas a formatação do CSS esta errado.
Neste caso, segue uma atualização do CSS para suporte pelo Google Chrome e alinhamento das células no FF4+:
[INICIO CODIGO CSS]
xml { display: none; } .gecko { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .khtml { box-sizing: border-box; -webkit-box-sizing: border-box; } .gecko[onresize] { -moz-binding: url(gecko.xml#resize); } .gecko[onmouseenter],.gecko[onmouseleave] { -moz-binding: url(gecko.xml#mouse); } .active-box-normal { position: relative; overflow-y: hidden; height: 18px; width: 100%; vertical-align: top; border-width: 1px; border-style: solid; border-color: threedhighlight threeddarkshadow threeddarkshadow threedhighlight; } .active-box-normal.gecko { overflow-y: visible; } .active-box-normal.khtml { overflow-y: visible; } .active-box-item { box-flex: 1; -moz-box-flex: 1; /*-webkit-box-flex: 1;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; height: 100%; padding: 0px 5px; border-width: 1px; border-style: solid; border-color: threedlightshadow threedshadow threedshadow threedlightshadow; background-color: threedface; } .active-box-item.gecko { -moz-binding: url(gecko.xml#item); } .active-gecko-item { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ height: 100%; box-align: center; -moz-box-align: center; -webkit-box-align: center; } .active-box-image { overflow: hidden; top: 0px; left: 0px; width: 16px; height: 100%; line-height: 1px; vertical-align: middle; margin: 0px 3px -1px 0px; } .active-box-image.gecko { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ overflow: visible; vertical-align: top; } .active-box-image.khtml { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ overflow: visible; vertical-align: top; } .active-image-none { width: 0px; margin-right: 0px; } .active-box-resize { position: absolute; overflow: hidden; top: 0px; right: -5px; width: 10px; height: 100%; font-size: 10px; cursor: e-resize; } .active-box-sort { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ display: -o-inline-box; overflow: hidden; width: 0px; height: 100%; vertical-align: top; } .active-box-item .active-box-image.gecko,.active-box-item .active-box-sort.gecko { height: 16px; } .active-box-item .active-box-image.khtml,.active-box-item .active-box-sort.khtml { height: 16px; } .active-sort-ascending .active-box-sort { width: 16px; background: url(grid.png) -20px 50% no-repeat; } .active-sort-descending .active-box-sort { width: 16px; background: url(grid.png) -40px 50% no-repeat; } .active-box-resize.gecko { font-size: 1px; position: relative; margin-left: -5px; margin-right: -5px; line-height: 12px; z-index: 1000; } .active-box-resize.khtml { font-size: 1px; position: relative; margin-left: -5px; margin-right: -5px; line-height: 12px; z-index: 1000; } .active-scroll-data { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; padding: 18px 0px 0px 28px; z-index: 1; } .active-scroll-top { position: absolute; overflow: hidden; white-space: nowrap; top: 0px; left: 0px; width: 100%; height: 18px; padding: 0px 20px 0px 28px; z-index: 2; } .active-scroll-left { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 28px; height: 100%; padding: 18px 0px 20px 0px; text-align: center; z-index: 2; } .active-scroll-corner { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 28px; height: 18px; z-index: 3; } .active-scroll-bars { position: absolute; overflow: auto; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px; /*z-index: 4;*/ /* Corrige a seleçao no IE8+ */ z-index:-1; }
.active-scroll-space { width: 0px; height: 0px; } .active-scroll-space.gecko { min-width: 1px; min-height: 1px; } .active-scroll-space.khtml { min-width: 1px; min-height: 1px; } .active-scroll-fill { display: inline; height: 100%; } .active-scroll-fill.gecko { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ } .active-scroll-fill.khtml { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ } .active-scroll-data.gecko,.active-scroll-top.gecko,.active-scroll-left.gecko { /*overflow: -moz-scrollbars-none;*/ /* OBSOLETO */ overflow: hidden; } .active-scroll-data.khtml,.active-scroll-top.khtml,.active-scroll-left.khtml { /*overflow: -moz-scrollbars-none;*/ /* OBSOLETO */ overflow: hidden; } .active-controls-grid { position: relative; overflow: hidden; width: 100%; height: 100%; cursor: default; -moz-user-focus: normal; -moz-user-select: none; text-align: left; outline: none; } .active-templates-header { display: inline; width: 100px; height: 100%; } .active-header-pressed { border-color: threeddarkshadow threedhighlight threedhighlight threeddarkshadow; } .active-header-pressed .active-box-item { position: relative; left: 1px; top: 1px; border-color: threedface; } .active-templates-header.gecko { display: inline-block; display: -moz-inline-box; /* MANTEM COMPATIVEL COM O FF3.6 - dimensionamento das colunas*/ display: -webkit-inline-box; } .active-templates-header.khtml { display: inline-block; display: -moz-inline-box; /* MANTEM COMPATIVEL COM O FF3.6 - dimensionamento das colunas*/ display: -webkit-inline-box; } .active-header-pressed .active-box-item.gecko { position: static; } .active-header-pressed .active-box-item.khtml { position: static; } .active-templates-row { overflow-y: hidden; white-space: nowrap; width: 100%; height: 18px; -moz-user-select: none; }
.active-templates-row.gecko { /*display: -moz-box;*/ display: block; overflow-y: visible; width: auto; min-width: 100%; } .active-templates-row.khtml { /*display: -moz-box;*/ display: block; overflow-y: visible; width: auto; min-width: 100%; } .active-row-cell { display: inline; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; width: 100px; height: 100%; padding: 0px 5px; line-height: 17px; vertical-align: top; white-space: nowrap; } .active-row-cell.gecko { display: inline-block; /*display: -moz-inline-box;*/ /*display: -webkit-inline-box;*/ } .active-row-cell.khtml { display: inline-block; /*display: -moz-inline-box;*/ /*display: -webkit-inline-box;*/ } .active-selection-true,.active-selection-true .active-row-cell { color: highlighttext !important; background-color: highlight !important; } .active-column-0 { z-index: 99 } .active-column-1 { z-index: 98 } .active-column-2 { z-index: 97 } .active-column-3 { z-index: 96 } .active-column-4 { z-index: 95 } .active-column-5 { z-index: 94 } .active-column-6 { z-index: 93 } .active-column-7 { z-index: 92 } .active-column-8 { z-index: 91 } .active-column-9 { z-index: 90 } .active-column-10 { z-index: 89 } .active-column-11 { z-index: 88 } .active-column-12 { z-index: 87 } .active-column-13 { z-index: 86 } .active-column-14 { z-index: 85 } .active-column-15 { z-index: 84 } .active-column-16 { z-index: 83 } .active-column-17 { z-index: 82 } .active-column-18 { z-index: 81 } .active-column-19 { z-index: 80 } .active-templates-text,.active-templates-image { -moz-binding: url(gecko.xml#box); } .active-gecko-box { box-flex: 1; /*-moz-box-flex: 1; /*-webkit-box-flex: 1;*/ overflow: hidden; height: 100%; width: 100%; } .active-templates-status,.active-templates-error { padding: 5px; } .active-image-txt { background: url(icons.png) -20px 50% } .active-image-htm { background: url(icons.png) -40px 50% } .active-image-xls { background: url(icons.png) -60px 50% } .active-image-doc { background: url(icons.png) -80px 50% } .active-image-pdf { background: url(icons.png) -100px 50% } .active-image-xml { background: url(icons.png) -120px 50% } .active-image-msi { background: url(icons.png) -140px 50% } .active-image-chm { background: url(icons.png) -160px 50% } .active-box-image { background-repeat: no-repeat } .active-image-loading { position: relative; top: 20px; left: 0px; width: 107px; height: 13px; margin-right: -107px; background: url(loading.gif) no-repeat; } .active-controls-grid { height: 100%; font: menu; color: #404066; } .active-grid-column { border-right: 1px solid threedlightshadow; } .active-grid-row { border-bottom: 1px solid threedlightshadow; }
[FIM CODIGO CSS]
Atualização em fase beta, mas funcional.
"ComputedCSSStyleDeclaration"
para
"CSSStyleDeclaration".
Apenas esta modificação vai permitir que ele seja exibido pelo chrome, mas a formatação do CSS esta errado.
Neste caso, segue uma atualização do CSS para suporte pelo Google Chrome e alinhamento das células no FF4+:
[INICIO CODIGO CSS]
xml { display: none; } .gecko { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .khtml { box-sizing: border-box; -webkit-box-sizing: border-box; } .gecko[onresize] { -moz-binding: url(gecko.xml#resize); } .gecko[onmouseenter],.gecko[onmouseleave] { -moz-binding: url(gecko.xml#mouse); } .active-box-normal { position: relative; overflow-y: hidden; height: 18px; width: 100%; vertical-align: top; border-width: 1px; border-style: solid; border-color: threedhighlight threeddarkshadow threeddarkshadow threedhighlight; } .active-box-normal.gecko { overflow-y: visible; } .active-box-normal.khtml { overflow-y: visible; } .active-box-item { box-flex: 1; -moz-box-flex: 1; /*-webkit-box-flex: 1;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100%; height: 100%; padding: 0px 5px; border-width: 1px; border-style: solid; border-color: threedlightshadow threedshadow threedshadow threedlightshadow; background-color: threedface; } .active-box-item.gecko { -moz-binding: url(gecko.xml#item); } .active-gecko-item { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ height: 100%; box-align: center; -moz-box-align: center; -webkit-box-align: center; } .active-box-image { overflow: hidden; top: 0px; left: 0px; width: 16px; height: 100%; line-height: 1px; vertical-align: middle; margin: 0px 3px -1px 0px; } .active-box-image.gecko { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ overflow: visible; vertical-align: top; } .active-box-image.khtml { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ overflow: visible; vertical-align: top; } .active-image-none { width: 0px; margin-right: 0px; } .active-box-resize { position: absolute; overflow: hidden; top: 0px; right: -5px; width: 10px; height: 100%; font-size: 10px; cursor: e-resize; } .active-box-sort { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ display: -o-inline-box; overflow: hidden; width: 0px; height: 100%; vertical-align: top; } .active-box-item .active-box-image.gecko,.active-box-item .active-box-sort.gecko { height: 16px; } .active-box-item .active-box-image.khtml,.active-box-item .active-box-sort.khtml { height: 16px; } .active-sort-ascending .active-box-sort { width: 16px; background: url(grid.png) -20px 50% no-repeat; } .active-sort-descending .active-box-sort { width: 16px; background: url(grid.png) -40px 50% no-repeat; } .active-box-resize.gecko { font-size: 1px; position: relative; margin-left: -5px; margin-right: -5px; line-height: 12px; z-index: 1000; } .active-box-resize.khtml { font-size: 1px; position: relative; margin-left: -5px; margin-right: -5px; line-height: 12px; z-index: 1000; } .active-scroll-data { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%; height: 100%; padding: 18px 0px 0px 28px; z-index: 1; } .active-scroll-top { position: absolute; overflow: hidden; white-space: nowrap; top: 0px; left: 0px; width: 100%; height: 18px; padding: 0px 20px 0px 28px; z-index: 2; } .active-scroll-left { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 28px; height: 100%; padding: 18px 0px 20px 0px; text-align: center; z-index: 2; } .active-scroll-corner { position: absolute; overflow: hidden; top: 0px; left: 0px; width: 28px; height: 18px; z-index: 3; } .active-scroll-bars { position: absolute; overflow: auto; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px; /*z-index: 4;*/ /* Corrige a seleçao no IE8+ */ z-index:-1; }
.active-scroll-space { width: 0px; height: 0px; } .active-scroll-space.gecko { min-width: 1px; min-height: 1px; } .active-scroll-space.khtml { min-width: 1px; min-height: 1px; } .active-scroll-fill { display: inline; height: 100%; } .active-scroll-fill.gecko { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ } .active-scroll-fill.khtml { display: inline-block; /*display: -moz-inline-box; display: -webkit-inline-box;*/ } .active-scroll-data.gecko,.active-scroll-top.gecko,.active-scroll-left.gecko { /*overflow: -moz-scrollbars-none;*/ /* OBSOLETO */ overflow: hidden; } .active-scroll-data.khtml,.active-scroll-top.khtml,.active-scroll-left.khtml { /*overflow: -moz-scrollbars-none;*/ /* OBSOLETO */ overflow: hidden; } .active-controls-grid { position: relative; overflow: hidden; width: 100%; height: 100%; cursor: default; -moz-user-focus: normal; -moz-user-select: none; text-align: left; outline: none; } .active-templates-header { display: inline; width: 100px; height: 100%; } .active-header-pressed { border-color: threeddarkshadow threedhighlight threedhighlight threeddarkshadow; } .active-header-pressed .active-box-item { position: relative; left: 1px; top: 1px; border-color: threedface; } .active-templates-header.gecko { display: inline-block; display: -moz-inline-box; /* MANTEM COMPATIVEL COM O FF3.6 - dimensionamento das colunas*/ display: -webkit-inline-box; } .active-templates-header.khtml { display: inline-block; display: -moz-inline-box; /* MANTEM COMPATIVEL COM O FF3.6 - dimensionamento das colunas*/ display: -webkit-inline-box; } .active-header-pressed .active-box-item.gecko { position: static; } .active-header-pressed .active-box-item.khtml { position: static; } .active-templates-row { overflow-y: hidden; white-space: nowrap; width: 100%; height: 18px; -moz-user-select: none; }
.active-templates-row.gecko { /*display: -moz-box;*/ display: block; overflow-y: visible; width: auto; min-width: 100%; } .active-templates-row.khtml { /*display: -moz-box;*/ display: block; overflow-y: visible; width: auto; min-width: 100%; } .active-row-cell { display: inline; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; width: 100px; height: 100%; padding: 0px 5px; line-height: 17px; vertical-align: top; white-space: nowrap; } .active-row-cell.gecko { display: inline-block; /*display: -moz-inline-box;*/ /*display: -webkit-inline-box;*/ } .active-row-cell.khtml { display: inline-block; /*display: -moz-inline-box;*/ /*display: -webkit-inline-box;*/ } .active-selection-true,.active-selection-true .active-row-cell { color: highlighttext !important; background-color: highlight !important; } .active-column-0 { z-index: 99 } .active-column-1 { z-index: 98 } .active-column-2 { z-index: 97 } .active-column-3 { z-index: 96 } .active-column-4 { z-index: 95 } .active-column-5 { z-index: 94 } .active-column-6 { z-index: 93 } .active-column-7 { z-index: 92 } .active-column-8 { z-index: 91 } .active-column-9 { z-index: 90 } .active-column-10 { z-index: 89 } .active-column-11 { z-index: 88 } .active-column-12 { z-index: 87 } .active-column-13 { z-index: 86 } .active-column-14 { z-index: 85 } .active-column-15 { z-index: 84 } .active-column-16 { z-index: 83 } .active-column-17 { z-index: 82 } .active-column-18 { z-index: 81 } .active-column-19 { z-index: 80 } .active-templates-text,.active-templates-image { -moz-binding: url(gecko.xml#box); } .active-gecko-box { box-flex: 1; /*-moz-box-flex: 1; /*-webkit-box-flex: 1;*/ overflow: hidden; height: 100%; width: 100%; } .active-templates-status,.active-templates-error { padding: 5px; } .active-image-txt { background: url(icons.png) -20px 50% } .active-image-htm { background: url(icons.png) -40px 50% } .active-image-xls { background: url(icons.png) -60px 50% } .active-image-doc { background: url(icons.png) -80px 50% } .active-image-pdf { background: url(icons.png) -100px 50% } .active-image-xml { background: url(icons.png) -120px 50% } .active-image-msi { background: url(icons.png) -140px 50% } .active-image-chm { background: url(icons.png) -160px 50% } .active-box-image { background-repeat: no-repeat } .active-image-loading { position: relative; top: 20px; left: 0px; width: 107px; height: 13px; margin-right: -107px; background: url(loading.gif) no-repeat; } .active-controls-grid { height: 100%; font: menu; color: #404066; } .active-grid-column { border-right: 1px solid threedlightshadow; } .active-grid-row { border-bottom: 1px solid threedlightshadow; }
[FIM CODIGO CSS]
Atualização em fase beta, mas funcional.
Quark
June 16,