How to remove extra empty column in end of free jqgrid

Question

If zoom level is not 100% and small screen resolution is used, extra empty column appears in end of free jqgrid for some zoom levels. To reproduce, open

http://www.ok-soft-gmbh.com/jqGrid/OK/Andrus-.htm

in Chrome at 67% zoom level in 1024x768 screen resolution:

For some other grid layouts free column is wider.

How to remove empty column at end ?

In earlier versions it does not occur.

You can open the page in question, right click on it and select View source. You see whole definition there. — Andrus

Oleg Oleg · Accepted Answer · 2015-12-06T12:52:13

The problem is in scaling of border of the grid which have 1px. As the result it can exist the difference in width of the grid and the outer div which is less then 1px, but which is still visible.

One can fix the problem by usage .getBoundingClientRect().width instead of jQuery.width for getting the width of the grid and to setting the same value on different outer divs of jqGrid on every grid or column resizing and on resizing (changing the zoom) of the page. The corresponding code could be the following:

var fineTuningOfWidth = function () {
        var $grid = $("#list"),
            gridWidth = $grid[0].getBoundingClientRect().width.toFixed(2) + "px",
            $gview = $grid.closest(".ui-jqgrid-view");
        $grid.closest(".ui-jqgrid-bdiv").css("width", gridWidth);
        $gview.children("div.ui-jqgrid-hdiv").css("width", gridWidth);
        $gview.css("width", gridWidth);
        $grid.closest(".ui-jqgrid").css("width", gridWidth);
    };
$("#list").jqGrid({
    datatype: "json",
    url: "andrus.json",
    colModel: [
        { label: "", name: "_actions", template: "actions" },
        { label: "Nimetus", name: "Nimi", jsonmap: "cell.0" }
    ],
    iconSet: "fontAwesome",
    jsonReader: { repeatitems: false }
}).bind("jqGridResizeStop", fineTuningOfWidth);
$(window).resize(fineTuningOfWidth);
setTimeout(fineTuningOfWidth, 150); // initial fine tuning of the width

See the modified demo

How to remove extra empty column in end of free jqgrid

1 Answers