alineación de celda de fila de cabecera de cuadrícula pulida

Question

Estoy usando una cuadrícula pulida para mostrar los datos en la cuadrícula. La red Slick calcula todo lo que se refiere a la altura y el ancho cuando se crea esa cuadrícula en particular y la cuadrícula se ve realmente bien. El problema fomenta cuando se crea la cuadrícula pero está oculta y en la acción de otra cosa (casilla de verificación/seleccionar botón de radio) la cuadrícula se vuelve visible. esta vez el cálculo sale mal y los encabezados y las celdas de la fila (columna del encabezado) no están alineados verticalmente.

No puedo entender cómo controlar esto. Si alguien más también ha sufrido a manos de la grilla resbaladiza y ha sido capaz de defenderse, por favor descubra las municiones.

En previsión, Premanshu

Answer 1

tuve un problema similar cuando se muestra de forma dinámica/ocultar cuadrículas usando jQuery .show() y .hide().

Si crea la etiqueta div con display: none (por lo que se oculta inicialmente), las columnas de la cuadrícula no se inician correctamente. Para solucionar esto, creo la etiqueta div con visibility: hidden y elimino este estilo antes de usar los métodos .hide() y .show().

Mi código es más o menos así:

<div id="mygrid" style="visibility: hidden"></div> 

    $grid = $("#mygrid") 

    grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions); 

    // Hide grid by default, remembering to remove the visibility style 
    $grid.hide(); 
    $grid.css("visibility", "visible"); 

    // You can now show and hide the grid using normal jQuery methods 
    $grid.show(); 
    $grid.hide(); 

Una vez que se inicializa y la propiedad visibility: hidden; se retira, estoy usando .hide() y .show() pero sospecho que esto funcionará si se manipula el display: none; atribuyen directamente si no estás usando JQuery.

Espero que esto ayude.

Answer 2

Esto es compatible y no debería suceder. De hecho, la mayoría de los ejemplos (incluido http://mleibman.github.com/SlickGrid/examples/example1-simple.html) tienen la misma implementación solo para asegurarse de que funciona correctamente.

¿Puede incluir un jsfiddle.net repro?

Answer 3

Tuve exactamente el mismo problema y después de leer las respuestas de @Premanshu y @Tin encontré una ruta diferente para resolverlo.

Básicamente, debe omitir un ciclo de evento y dejar que el DOM se ponga al día antes de mostrar la cuadrícula, esto le permitirá encontrar los anchos de columna correctos. Usé setTimeout para hacerlo.

var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>"); 
    grid = new Slick.Grid(myGrid, data, columns, options); 


    // ... later on, append the container to the DOM and initialize SlickGrid 
    setTimeout(function(){ 
    myGrid.appendTo(that.$el); 
    grid.init(); 
    },1); 

Answer 4

Tuve un problema similar al usarlo en una página que tenía twitter bootstrap css en él. La solución fue anular el tamaño de la caja a la casilla de contenido

*, *: antes, *: después de { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; tamaño de caja: content-box; }

probablemente debería averiguar exactamente qué clases realmente lo necesitan, pero eso solucionó las cosas para mí.

Answer 5

pude conseguir que esto funcione en la rutina de carga 3 (un ambiente donde box-sizing se establece en border-box) simplemente aplicando box-sizing: content-box a la .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column { 
    -webkit-box-sizing: content-box;                
    -moz-box-sizing: content-box; 
    box-sizing: content-box; } 

---

Sólo tenga cuidado al modificar las propiedades de border.slick-header-column. Yo era capaz de eliminar el borde a la derecha ajustando el color a transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
    border-right-color: transparent; 
} 

Nota: Se puede jugar con la especificidad del selector - el selector se desea sobreescribir es:

.slick-header-column.ui-state-default { ... } 

Answer 6

Ninguna de estas soluciones trabajó para mí, puede ser debido a que el código de SlickGrid cambió desde 2012 :) he encontrado una solución en este post, que es similar a la de @ Wex, pero con pequeñas diferencias:

.slickgrid, 
.slickgrid *, 
.slick-header-column { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} 

Donde .slickgrid es un selector de un elemento de contenedor de rejilla.

Answer 7

Lo resolvió para mí. Esto es lo que estaba haciendo: 1. rejilla iniciación del datos 2. anexados para que 3. Presentar usando modal del div que contiene la rejilla

para resolver lo hice: 1. Presente usando modal del div que contiene la cuadrícula 2. Inicializar la cuadrícula 3. Adjuntar datos