Unnecessary horizontal scrollbar jqGrid

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.

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 scrollb开发者_开发技巧ar 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;
    },
});

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.

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.

I added this code to the CSS file "ui.jqgrid.css" and the horizontal scrollbar no longer appears:

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

For me presonally the solution was this after the grid is loaded:

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