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

Thence

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

Semanteme

+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. – Deflagrate

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!) – Thence

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
    }

Sardonic

Answer 3

Deall All,

this can be as below:

 $("#jqxgrid").jqxGrid(

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

Nonchalance