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

Question

我有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

正如您所看到的,我正在使用高度:'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 */