CODEWITHSUNDEEP
javajqgrid
Meng Hai
Meng Hai

Reputation: 127

jqgrid increase toolbar height

Is it possible to increase the height of the top toolbar for jqgrid? In PC I can see the button, and select box ok. But when viewed in tablet ie andriod ICS and ios 5, the button and select box are truncated at the bottom bec either the height is too short or the padding cause the select box and button to show down alittle.

Using the latest jqgrid 4.3.1

<table id="gridmain"></table>
<div id="pagermain"></div>
<script src="Usergrid.js" type="text/javascript"> </script>

then in my js file: I enable toolbar with:

toolbar: [true,"top"]

then I added some select options and button on the top toolbar with:

$("#t_gridmain").append("&nbsp;Status:&nbsp;");
$("#t_gridmain").append("<select name='selStatus' id='selStatus'><option value='All'>All</option><option value='InProgress' selected>InProgress</option><option value='New'>New</option><option value='Passed'>Passed</option><option value='Failed'>Failed</option><option value='Withdrawn'>Withdrawn</option></select>&nbsp;&nbsp;&nbsp;&nbsp;");
$("#t_gridmain").append("<input type='button' value='Email' id='buttEmail' style='height:20px;font-size:-4'/>&nbsp;&nbsp;&nbsp;&nbsp;");
$("#t_gridmain").append("<input type='checkbox' id='showinactive' name='showinactive'/>&nbsp;Show Inactive&nbsp;&nbsp;&nbsp;");

Thanks.

Upvotes: 1

Views: 1946

Answers (2)

user3592180
user3592180

Reputation: 1

$("#t_gridmain").css('height', '30px');

Upvotes: 0

Oleg
Oleg

Reputation: 221997

I didn't tested my suggestion, but I suppose, that you can solve the problem by increasing of the height style to any value higher as the default value 25px:

.ui-jqgrid .ui-jqgrid-toppager {
    height: 30px !important;
}

UPDATED: It you mean top toolbar instead of the top navigation toolbar used more frequently you need

.ui-jqgrid .ui-userdata {
    height: 30px; /* default value in ui.jqgrid.CSS is 21px */
}

Upvotes: 2

Related Questions