不必要的水平滚动条jqGrid [英] Unnecessary horizontal scrollbar jqGrid

问题描述

在我的jqGrid(使用4.0.0版)中，我得到了一个不必要的水平滚动条，但同时也有一个垂直滚动条.仅在Chrome和Firefox中会出现此问题，而在Internet Explorer中不会.

In my jqGrid (using version 4.0.0), I get an unnecessary horizontal scrollbar but when there is a vertical scrollbar as well. This problem only occurs in Chrome and Firefox, but not in Internet Explorer.

表格宽度的计算似乎有些问题，因为水平滚动仅一个或两个像素.我使用autowidth: true作为宽度的表格属性.大约有八列，有些具有固定的宽度(很小)，其他的则具有动态宽度.

It seems as if there is something wrong with the calculation of the table width, because the horizontal scrolling is only one or two pixels. I use autowidth: true as table property for the width. There are about eight columns, some have a fixed width (very small), others have a dynamic width.

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

Disabling horizontal scrolling at all is no solution, because users can still enlarge certain columns and then a horizontal scrollbar is needed. But initialy I want it to load with the columns aligned to the table width and a vertical scrollbar when needed to display the table on smaller screens.

下面是代码中网格属性的一部分

Below is an exerpt of the grid properties in the code

    $("#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;
    },
});

推荐答案

您应确认CSS中没有对该表进行某些设置.

You should verify that you not have some setting of the table in your CSS.

例如，在我的建议中

For example in my suggestion here I described that the standard CSS of ASP.NET MVC project (all version from 1.0 till 3.0) include the following settings:

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

通过计算最佳网格宽度不会考虑此设置.如果您删除设置或添加以下其他设置

This setting will not taken in the consideration by calculating of the optimal grid width. If you remove the settings or add the following additional settings

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
}

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

the problem with the horizontal scroll bars will be solved.

如果您不使用ASP.NET MVC，则问题可能还有另一个原因，但是我建议您搜索table，td或th的CSS的任何定义.

If you not use ASP.NET MVC, you problem can have another reason, but I would recommend you to search for any definition of CSS for table, td or th.

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