How do I prevent a scroll bar from displaying in jqGrid?

Question

I'm using a jqGrid and a horizontal scrollbar appears. How can I stop this from happening?

Answer 1

Sometimes because of different problems the grid size will be wrong calculated and one has horizontal scroll bar. The problem are mostly based on

• some changes in CSS which inherited to jqGrid without changing of cellLayout parameter of the jqGrid
• different inheritance implementation of CSS styles in different browsers
• errors in width calculation algorithm of jqGrid. The grid size will be not correct adjusted after filling the grid with data.

In my ASP.NET MVC projects I had mostly the width of grid columns 5 pixel less then needed and the total grid width should be increased to 5*colNumbers.

The problems with the wrong grid width are difficult to debug and to fix. So some time ago I wrote a practical workaround which I suggested at the first time in my answer Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog. The idea of the workaround is to compare the size of the grid with with the scrollWidth property of the part of grid which will be scrolled. If scroll bar exists and the size of the grid is less then the size of the element of page which contain the grid, then we just increase the grid width and the scroll bar disappears.

For example we have following HTML fragment with jqGrid table

<div id="main">
<table id="grid"><tr><td/></tr></table>
<div id="pager"/>
</div>

then the schema how you can fix the horizontal scrolling problem could be following:

jQuery(document).ready(function () {
    var fixGridWidth = function (grid, mainBlockSelector) {
        // fix wrong width calculation 5 pixel per column
        //var gview = jQuery("#gview_" + grid[0].id); // like "#gview_grid"
        //var gview = grid.parent().parent().parent();
        var gviewDomElement = grid[0].parentNode.parentNode.parentNode;
        var gviewScrollWidth = gviewDomElement.scrollWidth;
        var mainWidth = jQuery(mainBlockSelector).width();
        var gridScrollWidth = grid[0].scrollWidth;
        var htable = jQuery('table.ui-jqgrid-htable', gviewDomElement);
        var scrollWidth = gridScrollWidth;
        if (htable.length > 0) {
            var hdivScrollWidth = htable[0].scrollWidth;
            if ((gridScrollWidth < hdivScrollWidth)) {
                // max (gridScrollWidth, hdivScrollWidth)
                scrollWidth = hdivScrollWidth;
            }
        }
        if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
            // min (scrollWidth, mainWidth)
            var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;
            // if the grid has no data, gridScrollWidth can be less
            // then hdiv[0].scrollWidth
            if (newGridWidth != gviewScrollWidth) {
                grid.jqGrid("setGridWidth", newGridWidth);
            }
        }
    };

    var grid = jQuery("#grid");
    grid.jqGrid({
        // ... all like allways
        loadComplete: function(data) {
            // do all what you need and then at the end fix the wigth:
            fixGridWidth(grid,"#main");
        },
        // ... other jqGrid options
    };
});

At the beginning of the code I use the structure of grid which consists of different divs and tables over the main grid table with the data. This structure you can see with IE8 or Chrome developer tools, Firebug of other tools. I describe the most parts of this structure in my old answers on other questions jqGrid get th and thead using Jquery and jqGrid footer cells “inherits” CSS from cells in the main grid.

Try to use this approach. It doesn't search for the reason of the scrolling problem, but nevertheless it can fix the most problem with horizontal scrolling.