Question

使用How to change the font size in jqGrid?的样式增加了免费的jqgrid字体和元素大小：

.ui-jqgrid tr.jqgrow td {
    font-size: 1.2em;
}

来自JQgrid set row height， How to make jqgrid top toolbar custom buttons bigger like standard buttons和 How to make free jqrid font awesome action buttons bigger

使用

定义过滤器工具栏

$(function () {
    $grid.jqGrid('filterToolbar', {
        searchOperators: true,
        stringResult: true,
        searchOnEnter: true,
        defaultSearch: 'cn'
    });
});

的问题：

搜索操作员菜单字体大小很小。
菜单项在悬停时跳舞
如果光标放在菜单项上，它会换行到多行，字体会变得更小

如何解决此问题，以便字体大小为1.2em并且不会出现跳舞？

测试用例：

<!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>

如何增加jqgrid搜索运算符菜单字体大小并删除跳舞

0 个答案: