Wrapping text in a jQuery jqGrid cell

I’ve been using jqGrid now for about a year and I’m relatively satisfied. I use jqGrid to prettify, ajaxify, and make more functional pre-generated reports for our customers. The first thing you might notice about the grid is that it uses Alt text to display full cell content. This is nice, for sure, but it cuts off a lot of content depending on the amount. At times I’d like to be able to display the full amount of data in a row and not have to make the width of a column overly wide! So I’m employing CSS to do the trick.

To wrap a cell’s text (non header) include this CSS after all of the jquery & jqgrid css has loaded:

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

And to wrap a column cell’s text:

.ui-jqgrid .ui-jqgrid-htable th div {
    white-space:normal !important;
    height:auto;
    vertical-align:text-top;
    position:relative;
    overflow:hidden;
}

jqGrid can be customized to add classes onto elements but not the parent of elements in the table thus we’re unable to set the parent td or div element to have the correct white-space CSS property. That’s why we have to add our own CSS in, after the fact, to get the effect we want.