jqgrid long text wrapping

Question

In jqgrid we have long text getting from DB, but need to wrap while displaying in JQgrid, is there any way to wrap long text (with out any spaces)? We have only 110px to spare for payee name field because we have multiple columns needs to be displayed. Our code is like

{name:"firstPayeeName",index:"firstPayeeName", width:"110px", align:"left", sorttype:"string"},

Pls provide solution if any. Thanks in advance.

Beedon

You should set white-space: normal !important; style for the rows. Look at the answer. If you need to wrap texts in the column headers see here. – Octangle

this works only when we have some space between the words. But I dont have any space and the word is long. – Beedon

Answer 1

In case of the test which you need to display has no blanks or other white-space you can't use the CSS style described here and here.

I would recommend you to use another CSS style:

<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* 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
    }
</style>

How you can see from the demo the text "testtesttesttesttesttesttesttesttest" will be displayed as the following:

Octangle

any way to do word wrap in view model dialog? because i have long text in my fields. If i click on view, it is showing popup with scroll bar. I don't want that. I want to word wrap at there... – Sleepless

@CJRamki: There are many options. The answer shows you the main CSS rule which you can use. You can combine it with max-height rule like here. – Octangle

Answer 2

.ui-jqgrid tr.jqgrow td
{           
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: normal !important;
    height: auto;
    vertical-align: text-top;
    padding-top: 2px;
    padding-bottom: 3px;
}

Use the above code its working. If your not give space also it will break lines

Butta

Answer 3

Above solution didnt worked for me, exaclty as is, but with little modification did! Go to themes/ui.jqgrid.css: search for: .ui-jqgrid tr.jqgrow td : and in the brackets insert:

 word-wrap: break-word; // IE 5.5+ and CSS3
        white-space: pre-wrap; // CSS3
        white-space: -moz-pre-wrap; // 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

Gestation

Was this because of the order of the style sheets in your html? Sounds like you defined your custom style before your link to ui.jqgrid.css if your style didn't do anything. – Doublecheck

i dont remember quite well right now. I defined my own style for the jqrid! and maybe the order affected this! thanks Scotty! – Gestation