How to restrict maximum height of row in jqgrid

9
votes

Column contains long multiline texts which make row height too big.

I tried styles below based on Tony's answer in http://www.trirand.com/blog/?page_id=393/help/possible-row-height-bug-in-in-ie8/

but those do not limit row maximum height: Row height is still equal to by number of lines in column.

How to limit maximum height of row to some value? Text should not wrap (as it already is using jqGrid default settings) and remaining rows should not shown. (Whole text can examined in edit mode if edittype textarea is used).

jqgrid tr.jqgrow td { 
  max-height  : 100px;
 }

ui-jqgrid tr.jqgrow td {
 max-height  : 100px;
 }

td {
  max-height  : 100px;
  }

tr {
  max-height  : 100px;
  }
2
jqgrid

2 Answers

17
votes

You can't use max-height on td or tr elements, but you can place the multiline text inside of the <div> having the same style. To do this you can use for example the following custom formatter:

formatter: function(v) {
    return '<div style="max-height: 100px">' + v + '</div>';
}

or place the <div style="max-height: 100px">...</div> inside of your JSON/XML data. As the result you will have something like

enter image description here

(I displayed tooltip during I made the screenshot to show that the data in the cell contain more lines as displayed in the grid) See the corresponding demo here.

4
votes

I know this is late, but you can use this CSS for ALL columns:

.ui-jqgrid tr.jqgrow td {
    white-space:nowrap;
}

Or, for an individual column:

.no-wrap-col {
    white-space: nowrap;
}

Then in your ColModel, on whichever column you want to prevent wrapping on, apply the class:

classes: "no-wrap-col"