problem with wrapping jqGrid column headers on IE

Question

Hi
I'm using jqGrid in my pages, I modified the ui.jqgrid.css file to wrap the column headers like this:

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
}

.ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column{
    white-space:normal;
}

it works fine in all of the browsers but IE! I tried IE7 and IE8 and the problem is still out there.

Answer 1

Try to use additionally

.ui-th-div-ie {
    white-space:normal !important;
    height:auto !important;
}

UPDATED: It seems to me, that instead of all this styles it would be better to use one following:

th.ui-th-column div{
    white-space:normal !important;
    height:auto !important;
    padding:2px;
}

It seems work very good in all browsers. See http://www.ok-soft-gmbh.com/jqGrid/scawa1952_.htm as an example.