How do i fix alignment issue of rows?

223 views Asked by At

on fiddle fiddle code a jqpivot shows sales data of cars. Following problem could be a css issue or a configuration issue. When i ran the same code in IE with the size of height of grid set to 100.

{
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true, width: 75 },
    shrinkToFit: false,
    useUnformattedDataForCellAttr: false,
    autoResizing: { compact: true },
    groupingView: {
        groupField: ["x0"],
        groupColumnShow: [false],
        groupText: ["<span class='group-text'>{0}</span>"]
    },
    width: 600,
    height:100,
    toolbar: [true, "top"],
    pager: true,
    rowNum: 7,
    threeStateSort: true,
    sortname:['x1'],
    caption: "<b>Car sales statistics</b>",
    rowList: [5,7, 10, 20, 100, "10000:All"]
}); 

As shown on the image below, when the user scrolls down and stops at a point and clicks on row the highlighter shows that the row is not in one line instead there is a visual split. visual split. with a large dataset this is very visible to the naked eye on IE. How do i fix this issue?

1

There are 1 answers

3
Oleg On BEST ANSWER

I can't reproduce the problem in IE, but I'd recommend you to add

$grid.trigger("jqGridResizeStop.setFrozenColumns");

in your code to force recalculation of the height and the position of all elements of frozen divs. See https://jsfiddle.net/OlegKi/rkxutxuv/7/ as an example.