Unnecessary horizontal scrollbar jqGrid

Question

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 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;
    },
});

Fallingout

Answer 1

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.

Danell

Thanks for your quick reaction. I am indeed using ASP.NET MVC, but unfortunately your solution did not solve my problem, even though the new properties got applied correctly (had to use !important for some). Also the other solutions on the link you supplied did not solve it. But the problem always comes from problems with the CSS styling? Then I will look further into that. – Fallingout

@Erwin: I just tried to reproduce your problem. I used MVC example from the answer, added autowidth: true and all worked without scroll bars. Then I updated to jqGrid 4.0 and all works the same as before. So probably your tests was incorrect or you have some additional CSS which are not standard for ASP.NET MVC. – Danell

Answer 2

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;
}

Materse

this removes the scroll bar but misaligns the column names and table data – Hexad

I added the same rule to ui-jqgrid .ui-jqgrid-htable and it fixes the misalign issue. – Rosewood

Answer 3

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);

Conversation