Barra de desplazamiento horizontal innecesaria jqGrid

En mi jqGrid (utilizando la versión 4.0.0), obtengo una barra de desplazamiento horizontal innecesaria pero cuando también hay una barra de desplazamiento vertical. Este problema solo ocurre en Chrome y Firefox, pero no en Internet Explorer.Barra de desplazamiento horizontal innecesaria jqGrid

Parece que hay un problema con el cálculo del ancho de la tabla, ya que el desplazamiento horizontal es de solo uno o dos píxeles. Yo uso autowidth: true como propiedad de la tabla para el ancho. Hay alrededor de ocho columnas, algunas tienen un ancho fijo (muy pequeño), otras tienen un ancho dinámico.

Desactivar el desplazamiento horizontal en absoluto no es una solución, porque los usuarios aún pueden agrandar ciertas columnas y luego se necesita una barra de desplazamiento horizontal. Pero, inicialmente, quiero que se cargue con las columnas alineadas con el ancho de la tabla y una barra de desplazamiento vertical cuando sea necesario para mostrar la tabla en pantallas más pequeñas.

A continuación se muestra un extracto de las propiedades de la cuadrícula en el código

$("#grid").jqGrid({ 
    datatype: 'json', 
    mtype: 'POST', 
    colNames:loadColumns(columns)[0], 
    colModel:loadColumns(columns)[1], 
    height: $(window).height() - 160, 
    rownumbers: false, 
    pager: '#pager', 
    rowNum:25, 
    rowList:[25,50,100], 
    sortname: 'invid', 
    sortorder: 'desc', 
    viewrecords: true, 
    autowidth: true, 
    beforeSelectRow: function(){ 
     return false; 
    }, 
});

Fuente

2011-04-13 Erwin

Se debe comprobar que usted no tiene un cierto ajuste de la tabla en su CSS.

Por ejemplo, en mi sugerencia here que describe que el estándar CSS del proyecto ASP.NET MVC (toda la versión 1.0 hasta la 3.0) incluyen los siguientes ajustes:

table 
{ 
    border: solid 1px #e8eef4; 
    border-collapse: collapse; 
} 
table td 
{ 
    padding: 5px; 
    border: solid 1px #e8eef4; 
}

Este ajuste no será tomado en la consideración calculando el ancho de cuadrícula óptimo. Si se quita la configuración o añadir los siguientes valores adicionales

div.ui-jqgrid-view table.ui-jqgrid-btable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable td 
{ 
    border-left-style:none 
} 
div.ui-jqgrid-view table.ui-jqgrid-htable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable th 
{ 
    border-left-style:none 
}

el problema con las barras de desplazamiento horizontal será resuelto.

Si no utiliza ASP.NET MVC, que un problema puede tener otra razón, pero yo le recomendaría a la búsqueda de cualquier definición de CSS para table, td o th.

Fuente

2011-04-13 10:11:23 Oleg

Gracias por su rápida reacción. De hecho estoy usando ASP.NET MVC, pero desafortunadamente su solución no resolvió mi problema, a pesar de que las nuevas propiedades se aplicaron correctamente (¡tenía que ser! Importante para algunos). Además, las otras soluciones en el enlace que proporcionó no lo resolvieron. ¿Pero el problema siempre proviene de problemas con el estilo CSS? Luego miraré más a fondo en eso. – Erwin

@Erwin: Intenté reproducir tu problema. Utilicé el ejemplo MVC de [la respuesta] (http://stackoverflow.com/questions/5500805/asp-net-mvc-2-0-implementation-of-searching-in-jqgrid/5501644#5501644), agregué 'autowidth : true' y todo funcionó sin barras de desplazamiento. Luego actualicé a jqGrid 4.0 y todo funciona igual que antes. Por lo tanto, es probable que sus pruebas hayan sido incorrectas o que tenga algún CSS adicional que no sea estándar para ASP.NET MVC. – Oleg

Éste resolvió mi problema, +1 por eso. – Grubsnik

Para mí presonally la solución era esto después de la cuadrícula se carga:

$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);

Fuente

2011-12-06 11:50:38 Steve

que añade este código al archivo CSS "ui.jqgrid.css" y la barra de desplazamiento horizontal ya no aparece:

.ui-jqgrid .ui-jqgrid-btable 
{ 
    table-layout: auto; 
}

Fuente

2012-08-16 12:46:22

esto quita la barra de desplazamiento pero desalinea los nombres de las columnas y los datos de la tabla – abhihello123

Agregué la misma regla a ** ui-jqgrid .ui-jqgrid-htable ** y soluciona el problema de desalineación. –

Barra de desplazamiento horizontal innecesaria jqGrid

Respuesta

Cuestiones relacionadas