Search code examples
cssjqgrid

Jqgrid border form with and without top pager

I have a Jqgrid with rounded border (top and bottom) I achieved this by editiong the css file like this :

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 7px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 7px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 7px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 7px;
}

But if I enable the top pager I'm not able to get the top corners rounded (see picture).

My questions :

  1. How to solve this and have the full table rounded with top pager enabled ?
  2. Is it possible to have a dedicated border option to have only the top pager with a border (and the rest of the table would not have any border parameters)? I would like to give the top pager a separate / individual div border effect as if it wasn't part of the Jqgrid table.

Thanks

enter image description here

Solution

  • Does this do it:

    .ui-jqgrid-toppager {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

    If not, try for .ui-jqgrid .ui-jqgrid-toppager, but the above worked for me.