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

【问题标题】：How to get rid of horizontal scroll bar when not needed不需要时如何摆脱水平滚动条
【发布时间】：2011-06-25 00:04:20
【问题描述】：

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

一旦我将第二列设置为显示滚动条就会消失，如下所示：

在 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

如您所见，我正在使用 height: 'auto' ，这样当用户选择更高的页数时，它会向下延伸。我在其他显示多列的 jgGrid 上没有这个问题。仅显示一列的 jgGrid。

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

我试图用this 和this 的例子重现你的问题，但我没有你描述的效果。网格的宽度将被正确计算。

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

【讨论】：

你完全正确。我有一个 table 和 td 的样式，它设置了边框和边框折叠。应该看到的。感谢您的宝贵时间！
@Sarath：答案现在已经很老了，是关于 Firefox 中的水平条的。在我的测试中，演示在 Firefox 13.0.1 和 IE9 中没有水平条。如果您使用 Google Chrome，您必须将 jqGrid 3.8.2 的使用更新到当前的 4.4.0，因为 here 描述的问题。例如the demo与第一个相同，但使用jqGrid 4.4.0。它现在在 Google Chrome 20 中没有水平条。
@Oleg 感谢您为我指明正确的方向。我的问题已经解决了。

【解决方案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 */

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

添加此样式

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

【讨论】：