CODEWITHSUNDEEP
jqueryjqgrid
user354625
user354625

Reputation: 557

How to change the header height in jQuery grid?

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?

Upvotes: 12

Views: 21396

Answers (4)

Bradley Mountford
Bradley Mountford

Reputation: 8273

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.

Upvotes: 20

Mahesh
Mahesh

Reputation: 359

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

Upvotes: 3

muni
muni

Reputation: 1360

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

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

Upvotes: 2

Hitesh Patel
Hitesh Patel

Reputation: 389

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

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

Upvotes: 7

Related Questions