Wie ändere ich die Kopfhöhe in jQuery Grid?

Question

Ich habe ein jQuery-Raster mit 5 Spalten. Mein Spaltenname ist zu groß, so definierte ich so etwas wie dies in meinem jQuery Grid:

Information about <br/> customers bioData 

In meiner jQuery Spalte I „Informationen über“ sehe, aber ich bin nicht in der Lage „Kunden BioData“ zu sehen.

Wie kann ich die Kopfhöhe einstellen?

Answer 1

Wenn Sie jqGrid beziehen, sieht es aus wie das Update ein CSS zwicken gemäß den folgenden Artikeln:

http://www.trirand.com/blog/?page_id=393/help/grid-header-height/ http://2centtech.blogspot.com/2009/12/jqgrid-header-and-cell-value-word-wrap.html

.ui-jqgrid .ui-jqgrid-htable th div { 
    height:auto; 
    overflow:hidden; 
    padding-right:4px; 
    padding-top:2px; 
    position:relative; 
    vertical-align:text-top; 
    white-space:normal !important; 
} 

Edit: Wie rd22 in den Kommentaren fand heraus, es scheint, dass einige Versionen von jqGrid ein !important Flag auf der Höhenregel haben (und möglicherweise andere?). Wenn Sie also feststellen, dass das obige CSS nicht funktioniert, könnte das der Grund sein. Ändern Sie einfach die obigen Regeln, um height:auto !important einzuschließen, und Sie sollten gut gehen.

Answer 2

Ausgezeichnet, aber für IE, müssen Sie auch die oben genannten zusätzlichen Klasse hinzufügen.

.ui-jqgrid table.ui-jqgrid-htable { 
    height:30px; 
} 

Answer 3

folgende CSS-Stile in zwischen Style-Tag in Ihrer jqGrid Datei hinzufügen.

<style> 
.ui-jqgrid .ui-jqgrid-hdiv {height:25px;} 
</style> 

Answer 4

Sie müssen sowohl die Höhe als auch die Höhe der Tabelle header (th) festlegen.

.ui-jqgrid .ui-jqgrid-htable th { 
    height: 30px; 
    padding: 0 2px 0 2px; 
} 
.ui-jqgrid .ui-jqgrid-htable th div { 
    overflow: hidden; 
    position: relative; 
    height: 30px; 
}