Problem with wrapping jqGrid column headers in IE

Question

I use jqGrid in my pages, I modified the ui.jqgrid.css file to wrap the column headers as follows:

.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 great in all browsers except IE! I tried IE7 and IE8 and the problem still exists.

Answer 1

Try using extra

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

UPDATED : It seems to me that instead of all these styles it would be better to use the following:

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

It seems to work very well in all browsers. An example is here .

UPDATED 2 . You can find more information and more detailed information about the problem at.

Answer 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 to answer Oleg. But, although there was packaging, the height did not increase to match the contents. So I modified css as above and worked. I thought this would help someone like me. :)