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

我有两列jqGrid，一个是隐藏的。出于某种原因，在FireFox它示出了水平滚动条象下面这样：如何摆脱不需要的水平滚动条

enter image description here

只要我设定第二栏，显示滚动条消失象下面这样： enter image description here

在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

正如你可以看到我使用的高度：“自动”，这样，当用户选择一个更高的页面数也将跨越下来。我在其他显示多列的jgGrid上没有这个问题。只有显示了一列的jgGrid。

来源

2011-02-10 Billy Logan

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

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

来源

2011-02-10 18:05:07 Oleg

你是完全正确的。我有一个table和td的样式，它设置边框以及border-collapse。应该看到了。感谢您的时间！ – 2011-02-10 18:22:38

@比利洛根：不客气！ – Oleg 2011-02-10 19:11:46

我终于得到了完美的解决方案。我也试图解决水平滚动条问题。 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 */

来源

2012-06-25 09:03:11 user1479471

貌似这个问题可能会回来。 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; 
}

来源

2012-08-02 19:33:29 pconrey

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

回答

相关问题