Search code examples
cssjqgrid

Apply css to just one grid

I'm using jqgrid 4.5.4.

I'm trying to apply some css using this selectors

.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;
}

but since i have multiple grids and i just want to apply this css to a grid, i tried this way:

#grid .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;
}

but with no success.

Is there a way to apply this css to just one or two grids instead of all grids?

Solution

  • The selector

    #grid .ui-jqgrid tr.jqgrow td {...}

    is wrong because .ui-jqgrid is outer div relative to the grid. Correct would be at least the following:

    .ui-jqgrid #grid tr.jqgrow td {...}

    see the structure of jqGrid divs and tables here.