Problem with wrapping jqGrid column headers on IE

Solution 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 an example here.

UPDATED 2: More information and more demos about the problem you can find in the answer.

Solution 2:

This should work:

th.ui-th-column div{
    height:auto!important;
}

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

I tried Oleg's answer. But, though there was wrapping, height did not increase to fit the contents. So I modified the css as above and did work. I thought it will help someone out there like me. :)