How to implement wordwrap on jqGrid which works on IE7, IE8 and FF

Question

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'?

Answer 1

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;
}

Answer 2

Use this css, this will surely help.

   .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: normal !important; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }

Answer 3

Deall All,

this can be as below:

 $("#jqxgrid").jqxGrid(

            {
                source: dataAdapter,
                width: 1500,
                autorowheight: true,
                autoheight: true,
                columnsresize: true,
                theme: 'ui-redmond',