Free jqgrid font and elements sizes are increased using style from How to change the font size in jqGrid?:
.ui-jqgrid tr.jqgrow td {
font-size: 1.2em;
}
and from JQgrid set row height, How to make jqgrid top toolbar custom buttons bigger like standard buttons and How to make free jqrid font awesome action buttons bigger
Filter toolbar is defined using
$(function () {
$grid.jqGrid('filterToolbar', {
searchOperators: true,
stringResult: true,
searchOnEnter: true,
defaultSearch: 'cn'
});
});
Issues:
- search operator menu font size is small.
- Menu items are dancing on hover
- If cursor is placed over menu item it wraps to multiple rows and font becomes even more smaller
How to fix this so that font size will be 1.2em and dancing does not occur ?
Testcase:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" />
<style type="text/css">
.ui-jqgrid > .ui-jqgrid-view input,
.ui-jqgrid > .ui-jqgrid-view select,
.ui-jqgrid > .ui-jqgrid-view textarea {
font-size: 1em !important;
}
.ui-jqgrid tr.jqgrow td {
font-size: 1.2em;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
margin: 1px 4px;
}
div > span.ui-pg-button-icon-over-text.fa {
font-size: 32px;
}
div > span.ui-pg-button-icon-over-text.glyphicon {
font-size: 25px;
}
.ui-jqgrid > .ui-jqgrid-pager .navtable,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
font-size: 13px;
}
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {
margin: 1px;
font-weight: normal;
}
.ui-pg-button-text {
margin: 4px !important;
}
.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div {
height: 21px;
}
.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox {
width: 100%;
height: 100%;
}
.ui-search-input input {
height: 26px;
}
.jqgrid-inlineedit-select {
padding-left: 0;
padding-right: 0;
}
.ui-jqdialog {
font-size: 1em;
}
.ui-jqgrid .ui-jqgrid-htable th {
height: 2em;
font-size: 1.2em;
}
.ui-jqgrid tr.jqgrow td {
height: 2.8em;
}
.jqgrow .ui-jqgrid-actions > .ui-pg-div > span {
font-size: 22px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint plusplus: true */
$(function() {
"use strict";
var myData = [{
item_id: "1",
item: "test",
item_cd: "note"
}, {
item_id: "2",
item: "test2",
item_cd: "note2"
}, {
item_id: "3",
item: "test3",
item_cd: "note3"
}, {
item_id: "4",
item: "test4",
item_cd: "note4"
}, {
item_id: "5",
item: "test5",
item_cd: "note5"
}, {
item_id: "6",
item: "test6",
item_cd: "note6"
}, {
item_id: "7",
item: "test7",
item_cd: "note7"
}, {
item_id: "8",
item: "test8",
item_cd: "note8"
}, {
item_id: "9",
item: "test9",
item_cd: "note9"
}, {
item_id: "10",
item: "test10",
item_cd: "note10"
}, {
item_id: "11",
item: "test11",
item_cd: "note11"
}, {
item_id: "12",
item: "test12",
item_cd: "note12"
}],
myGrid = $("#list451");
myGrid.jqGrid({
datatype: 'local',
data: myData,
height: 255,
width: 600,
colNames: ['Index', 'Name', 'Code'],
colModel: [{
name: 'item_id',
width: 65,
sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge']
}
}, {
name: 'item',
width: 150,
sorttype: 'string',
searchoptions: {
sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en']
}
}, {
name: 'item_cd',
width: 100
}],
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50],
loadonce: true,
//mtype: "GET",
rownumbers: true,
rownumWidth: 40,
gridview: true,
pager: '#pager451',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data from server at once"
});
myGrid.jqGrid('filterToolbar', {
searchOperators: true,
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
});
});
//]]>
</script>
</head>
<body>
<table id="list451">
<tr>
<td></td>
</tr>
</table>
<div id="pager451"></div>
</body>
</html>
