如何在不需要时摆脱水平滚动条 [英] How to get rid of horizontal scroll bar when not needed

问题描述

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

I have jqGrid with two columns, one being hidden. For some reason in FireFox it shows a horizontal scroll bar like below:

我设置第二列后显示滚动条就像下面一样消失：

as soon as i set the second column to show the scroll bar goes away like below:

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

In IE this displays in the same manner accept that a vertical scroll is added to the first image. Think this has to do with the horizontal bar. If someone knows how to get rid of the horizontal bar without setting the height of the grid to anything other than 'auto' please let me know.

我的jqGrid设置脚本：

my jqGrid setup script:

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。

As you can see i am using the height: 'auto' so that when the user selects a much higher page count it will span down. I don't have this problem on other jgGrids which are displaying multiple columns. Only jgGrids that have one column shown.

推荐答案

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

I tried to reproduce your problem with this and this examples, but I have not the effect which you described. The width of the grid will be correct calculated.

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

Probably the problem is in other CSS styles which you use. You can post the full code with the test JSON data which reproduce the problem.

这篇关于如何在不需要时摆脱水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！