jqGrid - ¿Hay alguna manera de mostrar siempre una barra de desplazamiento vertical?

Question

Mi aplicación tiene varias jqGrids que pueden contener o no suficientes filas para requerir una barra de desplazamiento vertical. Pero las filas se pueden agregar dinámicamente a estas cuadrículas después de que se hayan creado, de modo que una cuadrícula eventualmente requiera una barra de desplazamiento.

El problema es que si la cuadrícula no tiene suficientes filas para requerir una barra de desplazamiento, hay un espacio vacío en el lado derecho de la cuadrícula. Me gustaría solucionar esto de alguna manera: siempre muestre la barra de desplazamiento vertical, o de alguna manera la agregue dinámicamente cuando sea necesario.

He intentado añadir el siguiente CSS a .ui-jqGrid-bdiv div de la red:

overflow-y: scroll; 

Usando la siguiente jQuery (el código es feo, lo sé):

$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style", 
$("#mygrid").closest(".ui-jqgrid-bdiv").attr("style") + " overflow-y: scroll; "); 

Este funciona bien en Firefox y Chrome, pero en IE la cuadrícula nunca muestra la barra de desplazamiento (no importa cuántas filas agregue, se agregan a la parte inferior de la cuadrícula y nunca aparece una barra de desplazamiento vertical).

¡Se agradece cualquier ayuda!

Answer 1

overflow-y es CSS3, y todavía no es totalmente compatible con IE (suspiro ...)

Por lo tanto, creo que la única CSS 2 cosas que usted puede hacer acerca de esto, sin ningún otro marcado involucrados, es utilizar ya sea overflow: auto (que permitirá que el navegador decida) o overflow: scroll, que forzará tanto la barra de desplazamiento vertical como la horizontal.

Una solución alternativa puede ser envolver toda la cuadrícula en una div más grande con una altura mínima, por lo que la configura igual a la ventana de los navegadores + 1px. De esa forma forzarás una barra de desplazamiento vertical.

Establecer una altura mínima puede ser complicado de hacer en todos los navegadores, pero encontré que funciona muy bien en la mayoría de ellos.

.the-wrapper{ 
    height: auto !important; /* for real browsers*/ 
    height: 601px;   /* IE6 will use this a min-height. Use any height you need - you can even set this using JavaScript depending on the browser window height */ 
    min-height: 601px;  /* for real browsers - same value as height */ 
} 

Por supuesto, esto agregará algo de espacio por debajo de las cuadrículas. ¡Bienvenido a bordo!

Answer 2

¿Ha establecido la propiedad de altura en la cuadrícula? IE puede ponerse gruñón con las barras de desplazamiento si no se establece altura.

Answer 3

¿Usted intentó jqGrid 3.6 beta, que tiene un montón de nuevas características como: Filas de desplazamiento verdaderos Creo, que esta es la solución para usted.

Demostración de nuevas características: http://www.trirand.com/jqgrid/jqgrid36/jqgrid.html

alsow hay nuevo método añadido: gridResize que puede cambiar el tamaño de la cuadrícula. http://github.com/tonytomov/jqGrid/commit/a008ebf7b8ad684b21e51f21eed4301b82bc66f2

Answer 4

Hay una opción scrollOffset para jqGrid.

Establezca en cero y el espacio vacío desaparece.