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?

Unreason

what jquery grid plugin do you use? – Etz

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.

Habituate

In the blog it mentions, load this style after the css of the jqgrid loads, how can we ensure this? I used the above css but the column height is still fixed. – Detradetract

@Detradetract In general, as long as you reference the CSS file that contains the override after the jqgrid CSS file, the natural cascade should take care of it. However, my preferred method is to make sure that my CSS selectors have a higher specificity than the ones in whatever CSS I wish to override just to be sure. – Habituate

I found out why the height was not getting updated. the height is specified as important in jqGrid CSS and hence we need to mention height:auto !important for the height to be auto. – Detradetract

@Detradetract That must have been a recent change in jqgrid (I actually haven't used it in years). I really despise !important...it needs to DIAF. – Habituate

well to be honest, I never checked the css of JqGrid, the !important worked for me and I assumed the case. – Detradetract

@Detradetract Well I'm glad you found it and commented so that others that may have the same issue will know. – Habituate

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;
} 

Misplace

Answer 3

You need to set both table header (th) height and div height.

.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;
} 

Hydrastis

Answer 4

Add the following css styles in between style tag in your jQGrid file.

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

Passel