6

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.

double-beep
  • 5,031
  • 17
  • 33
  • 41
SJ.Jafari
  • 1,236
  • 8
  • 27
  • 39

2 Answers2

22

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
1

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. :)