不必要的水平滚动条jqGrid

在我的jqGrid（使用版本4.0.0）中，我得到了一个不必要的水平滚动条，但是当有一个垂直滚动条时也是如此。此问题仅在Chrome和Firefox中出现，但不在Internet Explorer中。不必要的水平滚动条jqGrid

看起来好像表格宽度的计算有问题，因为水平滚动只有一个或两个像素。我使用autowidth: true作为宽度的表属性。大约有八列，其中一些具有固定的宽度（非常小），而另一些具有动态宽度。

完全禁用水平滚动并不是解决方案，因为用户仍然可以放大某些列，然后需要水平滚动条。但最初我希望它加载与表宽度对齐的列和垂直滚动条，当需要在较小的屏幕上显示表时。

下面是网格属性的代码

$("#grid").jqGrid({ 
    datatype: 'json', 
    mtype: 'POST', 
    colNames:loadColumns(columns)[0], 
    colModel:loadColumns(columns)[1], 
    height: $(window).height() - 160, 
    rownumbers: false, 
    pager: '#pager', 
    rowNum:25, 
    rowList:[25,50,100], 
    sortname: 'invid', 
    sortorder: 'desc', 
    viewrecords: true, 
    autowidth: true, 
    beforeSelectRow: function(){ 
     return false; 
    }, 
});

来源

2011-04-13 Erwin

您应该确认你没有在你的CSS表中的一些设置的exerpt。

举例来说，在我的建议here我描述了ASP.NET MVC项目（所有版本1.0至3.0）包括以下设置的标准的CSS：

table 
{ 
    border: solid 1px #e8eef4; 
    border-collapse: collapse; 
} 
table td 
{ 
    padding: 5px; 
    border: solid 1px #e8eef4; 
}

此设置将不会在考虑采取通过计算最佳网格宽度。如果删除设置或添加以下附加设置

div.ui-jqgrid-view table.ui-jqgrid-btable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable td 
{ 
    border-left-style:none 
} 
div.ui-jqgrid-view table.ui-jqgrid-htable 
{ 
    border-style:none; 
    border-top-style:none; 
    border-collapse:separate; 
} 
div.ui-jqgrid-view table.ui-jqgrid-btable th 
{ 
    border-left-style:none 
}

水平滚动条的问题将得到解决。

如果不使用ASP.NET MVC，你问题可以有另外一个原因，但我会建议你来搜索table，td或th CSS的任何定义。

来源

2011-04-13 10:11:23 Oleg

感谢您的快速反应。我的确在使用ASP.NET MVC，但不幸的是你的解决方案并没有解决我的问题，即使新的属性被正确应用（必须使用！对某些重要的）。您提供的链接上的其他解决方案也没有解决它。但问题总是来自CSS样式的问题？然后我会进一步研究。 – Erwin 2011-04-13 11:37:01

@Erwin：我只是试图重现你的问题。我使用[答案]的MVC示例（http://stackoverflow.com/questions/5500805/asp-net-mvc-2-0-implementation-of-searching-in-jqgrid/5501644#5501644），添加了'autowidth ：true'，所有工作都没有滚动条。然后我更新到jqGrid 4.0，所有工作都与以前一样。所以可能你的测试不正确，或者你有一些额外的CSS，它们不是ASP.NET MVC的标准。 – Oleg 2011-04-13 11:53:53

这一个解决了我的问题，+1为此。 – Grubsnik 2011-06-30 14:26:08

对我来说presonally的解决方案是该网格被加载后：

$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);

来源

2011-12-06 11:50:38 Steve

我将此代码添加到CSS文件“ui.jqgrid.css”和水平滚动条不再出现：

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

来源

2012-08-16 12:46:22

这将删除滚动条，但未对齐列名和表数据 – abhihello123 2013-08-07 11:26:26

我向** ui-jqgrid .ui-jqgrid-htable **添加了相同的规则，它修复了错位问题。 – 2014-11-19 19:30:21

不必要的水平滚动条jqGrid

回答

相关问题