Question

我有jqGrid有两列，一列是隐藏的。出于某种原因，在FireFox中它显示了一个水平滚动条，如下所示：

enter image description here

一旦我将第二列设置为显示滚动条就像下面一样消失： enter image description here

在IE中，以相同的方式显示接受将垂直滚动添加到第一个图像。认为这与水平条有关。如果有人知道如何摆脱水平条而不将网格高度设置为“自动”以外的其他任何内容，请告诉我。

我的jqGrid设置脚本：

grid.jqGrid({
    url: "/Availability/GetData",
    colNames: ['row_id', 'Availability'],
    colModel: [
        { name: 'row_id', index: 'row_id', width: 20, hidden: false, search: false, editable: true, editoptions: { readonly: true, size: 10 }, formoptions: { rowpos: 1, label: "Id", elmprefix: "(*)"} },
        { name: 'AVAILABILITY', index: 'AVAILABILITY', width: 75, sortable: true, hidden: false, editable: true, editoptions: { size: 20, maxlength: 20 }, formoptions: { rowpos: 2, label: "Availability", elmprefix: "<span class='jqgridrequired'>*</span>" }, editrules: { required: true} }
        ],
    pager: pager,
    datatype: 'json',
    imgpath: '/Scripts/jqGrid/themes/redmond/images',
    jsonReader: {
        root: "Rows",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        userdata: "UserData",
        id: "row_id"
    },
    loadtext: 'Loading Data...',
    loadui: "enable",
    mtype: 'GET',
    rowNum: 10,
    rowList: [10, 20, 50],
    viewrecords: true,
    multiselect: false,
    sortorder: "asc",
    height: 'auto',
    autowidth: true,
    sortname: 'AVAILABILITY',
    caption: 'Existing Availabilities'
}).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false },
           { height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterEdit: true, url: "/Availability/Edit", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for edit
           {height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterAdd: true, url: "/Availability/Create", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for add
           {reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, url: "/Availability/Delete" }, // delete instead that del:false we need this
           {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
           {} //{height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
 );
enter code here

正如您所看到的，我正在使用高度：'auto'，这样当用户选择更高的页数时，它将会向下延伸。我在其他显示多列的jgGrids上没有这个问题。只有显示一列的jgGrids。

Answer 1

我尝试使用this和this示例重现您的问题，但我没有您所描述的效果。网格的宽度将被正确计算。

问题可能在于您使用的其他CSS样式。您可以使用重现问题的测试JSON数据发布完整代码。

Answer 2

我终于得到了完美的解决方案。我也试图克服水平滚动条问题。在Jquery中经常尝试很多次。但问题出在CSS上。在ui-jqgrid.css中，表格布局是固定的。使它成为自动它将完美地工作。我只是复制了同一个类，即

.ui-jqgrid .ui-jqgrid-btable
{
  table-layout:auto;
}  /* THIS CODE WILL WORK PERFECTLY BEFORE IT WAS IN 'FIXED' VALUE IN THEIR CSS */

Answer 3

看起来这个问题可能会回来了。 Chrome在7月31日发布v21，我突然开始获得水平滚动条。我正在使用jqGrid v4.4.0，搜索“webkit”的非最小化代码没有产生任何结果，所以我无法尝试Oleg的修复。

经过一些试验和错误后，Oleg's solution here和user1479471解决方案的组合对我有用：

div.ui-jqgrid-view table.ui-jqgrid-btable {
  table-layout:auto;
}

div.ui-jqgrid-view table.ui-jqgrid-htable {
  table-layout:auto;
}

Answer 4

添加此样式

  <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
  </style>

如何在不需要时摆脱水平滚动条

4 个答案: