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

我有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: "*" }, 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 (*) 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 (*) 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

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

问题可能在于您使用的其他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的解决方案和user1479471的解决方案的组合为我工作：

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