CODEWITHSUNDEEP
jqueryjquery-uijqgrid
Biff MaGriff
Biff MaGriff

Reputation: 8231

jqGrid - How can I make the paging buttons bigger?

I'm working on a touch screen application using jqGrid and I need bigger buttons.

I've been looking around but I can't figure out where the CSS setting for the paging/search/refresh buttons are so I can resize them.

How can I make the buttons bigger?

Edit: I had to make a few more changes to get the buttons to look just right. 

.ui-jqgrid .ui-jqgrid-pager { /* change height */ height:45px; }
.ui-jqgrid .ui-pg-button  { height:45px !important; width:46px !important;}
.ui-jqgrid .ui-jqgrid-pager .ui-icon { position:relative; margin: 0px 15px;}

Upvotes: 3

Views: 4959

Answers (1)

Andrew
Andrew

Reputation: 13853

jqGrid uses they jQuery UI css framework for styling, the source of the default buttons is,

<div class="ui-pg-div">
    <span class="ui-icon ui-icon-refresh"></span>
</div>

To make the Image larger, you will need to provide your own as they are taken from an image sprite, but to make the clickable area larger you can just target the margin of the span,

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
    margin: 10px;
}

Upvotes: 3

Related Questions