Column Wordwrap in JQGrid Column Wordwrap in JQGrid jquery jquery

Column Wordwrap in JQGrid


Just reference it in your own css file.

.ui-jqgrid tr.jqgrow td {    height: 50px;    white-space: normal;}

As long as your css file is listed in the header after the jqGrid.css file then it will override it.


For what it's worth, here it is for the header row:

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable  {    height:auto;    overflow:hidden;    white-space:normal !important;}


You need to take a look at the specific classes applied to your jqGrid th column headers. In my case I had the following: ui-th-div-ie ui-jqgrid-sortable

Looking a little further I found that there were two CSS issues:

  1. white-space: normal
  2. height: 16px

Both these CSS attributes where defined in ui.jqgrid.css. Realising that I had a specific requirement for this grid that I didnt want to have affecting other implementations I came up with the following solution:

$(".ui-jqgrid-sortable").css('white-space', 'normal');$(".ui-jqgrid-sortable").css('height', 'auto');