jqGrid - C'è un modo per visualizzare sempre una barra di scorrimento verticale?

Question

La mia applicazione ha diversi jqGrids che possono contenere o meno righe sufficienti per richiedere una barra di scorrimento verticale. Ma le righe possono essere aggiunte dinamicamente a queste griglie dopo che sono state create, in modo che una griglia possa eventualmente richiedere una barra di scorrimento.

Il problema è che se la griglia non ha abbastanza righe per richiedere una barra di scorrimento, c'è spazio vuoto sul lato destro della griglia. Mi piacerebbe risolvere questo in qualche modo - o visualizzare sempre la barra di scorrimento verticale, o in qualche modo aggiungerlo dinamicamente quando necessario.

Ho provato ad aggiungere il seguente CSS per .ui-jqGrid-bdiv div della griglia:

overflow-y: scroll; 

Utilizzando il seguente jQuery (il codice è brutto, lo so):

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

Questo funziona bene su Firefox e Chrome, ma su IE la griglia non visualizza mai la barra di scorrimento (non importa quante righe aggiungo, vengono aggiunte nella parte inferiore della griglia e non viene mai visualizzata una barra di scorrimento verticale).

Qualsiasi aiuto è apprezzato!

Answer 1

overflow-y è CSS3, e non è ancora pienamente supportato da IE (sigh ...)

Quindi, credo che le uniche 2 cose CSS si può fare su questo, senza alcun altro markup coinvolti, è quello di utilizzare overflow: auto (che consentirà al browser di decidere) o overflow: scroll, che imporrà sia le barre di scorrimento verticale che quelle orizzontali.

Una soluzione potrebbe essere quella di avvolgere l'intera griglia in un div più grande con un'altezza minima, in modo da impostare quella uguale alla finestra del browser + 1px. In questo modo forzerai una barra di scorrimento verticale.

L'impostazione di un'altezza minima può essere difficile da fare in tutti i browser, ma ho trovato che funziona molto bene nella maggior parte di essi.

.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 */ 
} 

Naturalmente, questo aggiungerà un po 'di spazio sotto le griglie. Benvenuto a bordo!

Answer 2

Hai impostato la proprietà altezza sulla griglia? IE può diventare scontroso con le barre di scorrimento se non è impostata l'altezza.

Answer 3

Hai provato jqGrid 3.6 Beta, ha un sacco di nuove caratteristiche come: Righe di scorrimento veri credo, che questa è la soluzione per voi.

Demo di nuove caratteristiche: http://www.trirand.com/jqgrid/jqgrid36/jqgrid.html

alsow c'è nuovo metodo ha aggiunto: gridResize che può ridimensionare la griglia. http://github.com/tonytomov/jqGrid/commit/a008ebf7b8ad684b21e51f21eed4301b82bc66f2

Answer 4

C'è un'opzione scrollOffset per jqGrid.

Impostarlo su zero e lo spazio vuoto scompare.