jqGrid Text/Word Wrapping

Just a quick post for anyone else having this issue. I am working with the latest version of jqGrid, and I am dealing with cell data that is longer than the width of the cell making it difficult to see. I wanted to have this data wrap and the height of the cell adjust to fit the wrapped content.

I found a ton of useful info on the jqGrid forums but it didn’t quite get me there.

The forum article in the above link suggests that you add the follwing CSS to your page:

1
2
3
.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
}

The above worked great for FF, but in IE, it would wrap the content, but the cell height would not auto adjust and therefore you really couldn’t see the full content. So I made a couple more changes as per the code snippet below and this seemed to work for me.

So the height:auto forces the cell height to auto adjust based on the size of the wrapped content. I haven’t noticed any side effects of changing this. If anyone has I’d love to hear about it. The vertical-align:top ensures that the text positions at the top so that the cells with less content don’t disappear in the centre due to the larger cell blocks. And finally, I added a bit of padding so that my cells don’t look oddly aligned due to the vertical-align bit, but that’s optional. It’ll work without it.

1
2
3
4
5
6
.ui-jqgrid tr.jqgrow td {
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding-top:2px;
}

If anyone else has run into this issue or has had to make a similar change, add your contribution to the comments below.

18 Responses to “jqGrid Text/Word Wrapping”

  1. lax March 30, 2011 at 6:27 pm #

    Thanks a lot it wokd for me
    height:auto;
    vertical-align:text-top;

  2. shereen April 1, 2011 at 12:00 pm #

    Awesome lax, glad it worked for you. Was a tricky problem to solve.

  3. Al Omar July 30, 2011 at 1:16 am #

    Thanks….worked very clean….

  4. AndreCS September 29, 2011 at 5:28 am #

    I could confirm it works for:
    - Chrome
    - IE 8, 9
    - Firefox

  5. shereen October 1, 2011 at 7:58 pm #

    Thanks AndreCS!

  6. Belli January 18, 2012 at 7:24 am #

    I tried this in IE6 and it worked, thanks.
    However, I want to use this in combination with a textarea. So new lines should be commited in jqGrid. This worked until I added your few lines of CSS-code. Any suggestions on how to do this?

  7. shereen January 18, 2012 at 8:26 pm #

    Hi Belli,

    Can you send me screenshots of what you are seeing. Or is this live somewhere I can view? I can probably offer a suggestion if I can see the behaviour.

  8. Jay January 23, 2012 at 1:41 am #

    Hi All,
    Can anyone tell me about applying cell left-padding,
    Because padding-left:8px;
    is not working for me.

    Thanks

  9. shereen January 23, 2012 at 11:51 am #

    Hi Jay,

    Have you used a tool like firebug or inspector to determine if that style is being overridden somewhere, or if it’s being correctly applied to the right element?

  10. Sumit Vairagar May 10, 2012 at 1:33 am #

    I love you, you are an angel!!!!

  11. Manikandan Raman August 21, 2012 at 11:56 pm #

    Very Useful one. working fine for me :). thanks

  12. sourabh January 7, 2013 at 11:06 pm #

    thanx very heklpfull

  13. Franklin September 6, 2013 at 4:34 pm #

    Thank You so much, I was looking for something like this for many days and with your css I have solved it. Thanks.

  14. Shereen Qumsieh September 6, 2013 at 5:49 pm #

    Awesome glad it helped!

  15. Dallas March 6, 2014 at 2:16 pm #

    Still relevant bit of css. Thanks for sharing. Would be a “nice to have” attribute of the colModel..like, “wrap:true”.

  16. Shereen Qumsieh April 28, 2014 at 5:38 pm #

    You are most welcome!

Trackbacks/Pingbacks

  1. Twitted by jqGrid - December 8, 2009

    [...] This post was Twitted by jqGrid [...]

  2. uberVU - social comments - January 12, 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by msshushu: having trouble word wrapping with #jqGrid, check this article out http://blog.qumsieh.ca/2009/12/03/jqgrid-textword-wrapping/

Leave a Reply