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

Question

我有两列jqGrid，其中一列被隐藏。由于某些原因，它在FireFox中显示了水平滚动条，如下所示：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS83dnpYbS5wbmcifQ==” alt =“在此处输入图像描述”>

我设置第二列以显示滚动条后就消失了，如下所示：

在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'，因此当用户选择高得多的页数时，它的范围将减小。我在显示多列的其他jgGrid上没有这个问题。仅显示具有一列的jgGrid。

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>