3

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;}
Biff MaGriff
  • 8,102
  • 9
  • 61
  • 98

1 Answers1

3

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;
}
Andrew
  • 13,757
  • 13
  • 66
  • 84