I encountered the same problem. But I was lucky enough to find the solution in a certain blog post -->http://2centtech.blogspot.com/.....-wrap.html)

In summary, the right CSS to set is:

Although I'm not sure if this solution has any bad side effects...

Just sharing it here for the benefit of others who may encounter the same issue.

  <style type=”text/css”>
      #mydiv table.scroll thead th div { height: auto; }
  </style>

Using Firebug, I was able to see that the Header text is contained within a DIV tag, which is contained within a TH in a TR of a THEAD tag.  This is part of a TABLE with class “scroll”, so the CSS mentioned previously is correct.  However, the text is aligned in the middle vertically within the TH tag, so I added an additional align attribute to move the text to the top:

  <style type=”text/css”>
      #mydiv table.scroll thead th { vertical-align: top; }
      #mydiv table.scroll thead th div { height: auto; }
  </style>

You can then play with the column width within the colModel property, but keep in mind that if you are sorting, then there is a SPAN tag right next to the DIV containing the header text to accommodate the sort indicator graphic (which actually displays to the right of the text.  This may affect the height because it will adjust the header layer based on the combination of column width, font height, and the sort indicator placement.

Quantity\\n Previously</br> Shipped

<style>

   #mydiv .ui-jqgrid-title { height:30px; }

</style>

Enclose your grid in div -> mydiv

Then after you load the jqGrid css add this

<style>

#mydiv table.scroll thead th  {

height:30px;

}

</style>

Regards

Tony

Was anyone able to resolve this - i am also having the same issue

Thanks

My column titles also are also long but the columnns value usally are one digit integer. I am trying to make the title shorter but it is hard.

I'll appreciate if anyone can share a solution to this problem.

Thanks, Maggie

Were you able to get this to work?

Perhaps I am missing something; when I play with the height settings I am able to get a visible change but the text isn't actually wrapping.

Code is  a copy of what Tony has shown above.

Suggestions on design are also welcome.  I have an integer field never >4 digits with the title: Quantity Previously Shipped.  Anyway that I slice it Qnt Prv Shpd starts to look ridiculous.  Thoughts?  I'd like to avoid wasting the real estate with whitespace.

Any help or commentary is greatly appreciated.

Cheers,
David

I never try, but you can experiment with height in setLabel something like

setLabel(0, “Invoice Number” ,{color:'red', 'text-align':'center','font-size':'15px', 'word-wrap': 'break-word', height:'30px'})

Regards

Tony

I used the setLabel method like this:

setLabel(0, "Invoice Number" ,{color:'red', 'text-align':'center','font-size':'15px', 'word-wrap': 'break-word'})

I want to set the text font size big but the whole string can't fit in the column header. Is there a method to set up the header layer height or cell height?

Thanks!

Maggie

Use setLabel method.

Regards

Tony

Is there a way to adjust the height of the grid header? I can only finde the property to set up the width of a column.

For example, I have a column header title  that's long- "counts with travel history", the counts are interger value so I don't want to set the column width too wide , hence the column title wraps and the second line is hidden. How to make the header higher so that the second line can be seen? 

Thanks!

Maggie