views:

334

answers:

1

How to implement wordwrap on jqGrid which works on IE7, IE8 and FF, while also having column-resize work (grid aligns correctly).

Tried to innerwrap content on each td with a div of specific width (based on initial TH width), but colresize will not work on the divs I've inserted. jqGrid calculates the widths of the resized TH and adjacent THs though.

Is there a better solution which will avoid all the JavaScript 'hacks'?

+4  A: 

jqGrid Text/Word Wrapping explains how to do this, using the following CSS:

.ui-jqgrid tr.jqgrow td {
 white-space: normal !important;
 height:auto;
 vertical-align:text-top;
 padding-top:2px;
}
Justin Ethier
+1: very good and clear solution. I suggest only to use `title:false` in `ColModel` for all columns to switch off tooltips which are no more needed. One will save a little memory. Moreover usage other `vertical-align` as `text-top` for all cells in the table can be probably also interesting.
Oleg
champs!!! good answer + tip.
Brandon
eventually removed vertical-align:text-top, as it was causing the underline styling of anchors in columns with overflow hidden content to overflow in IE. (only the underline overflows!)
Brandon