How to change the header height in jQuery grid?

Question

I have a jQuery grid, with 5 columns. My column name is too large so I defined something like this in my jQuery grid:

Information about <br/> customers bioData

In my jQuery column I am seeing "Information about" but I am not able to see "Customers BioData".

How can I set the header height?

Answer 1

If you are referring to jqGrid, it looks like the fix is a CSS tweak as per the following articles:

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: As rd22 found out in the comments, it seems that some versions of jqGrid may have an !important flag on the height rule (and possibly others?). So if you find that the above CSS does not work, that may be why. Just change the above rules to include height:auto !important and you should be good to go.

Answer 2

Excellent but for IE, you also need to add the below in addition to above class.

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