Just a quick post for anyone else having this issue. I am working with the latest version of jqGrid, and I am dealing with cell data that is longer than the width of the cell making it difficult to see. I wanted to have this data wrap and the height of the cell adjust to fit the wrapped content.

I found a ton of useful info on the jqGrid forums but it didn’t quite get me there.

The forum article in the above link suggests that you add the follwing CSS to your page:

1
2
3

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

The above worked great for FF, but in IE, it would wrap the content, but the cell height would not auto adjust and therefore you really couldn’t see the full content. So I made a couple more changes as per the code snippet below and this seemed to work for me.

So the height:auto forces the cell height to auto adjust based on the size of the wrapped content. I haven’t noticed any side effects of changing this. If anyone has I’d love to hear about it. The vertical-align:top ensures that the text positions at the top so that the cells with less content don’t disappear in the centre due to the larger cell blocks. And finally, I added a bit of padding so that my cells don’t look oddly aligned due to the vertical-align bit, but that’s optional. It’ll work without it.

1
2
3
4
5
6

.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

If anyone else has run into this issue or has had to make a similar change, add your contribution to the comments below.