Search code examples
javascriptjquerygoogle-chromejqgridright-to-left

jqGrid - columns padding issue in google chrome when use RTL

I use jqGrid plugin and I set direction: "rtl" in the options. I need to have horizontal scroll bar, because I have too many columns. My problem is columns body height not synchronized with columns header height in google chrome when I have horizontal scroll bar. I post two pictures and hope these pictures can explain my problem. Thanks in advance.

Grid screenshot when there is no horizontal scroll bar: enter image description here Every things is ok here.

And here is screenshot when there is horizontal scrollbar: enter image description here

Note that this is just example and in my real application I have more than 20 columns in the grid.

Solution

  • I can confirm, that jqGrid have some problems with column alignment in case of usage direction: "rtl". If you use height: "auto" option then I would recommend you to use additional CSS rule

    .ui-jqgrid .ui-jqgrid-hbox-rtl { padding-left: 0 }

    and include additionally include the line

    this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;

    inside of loadComplete and resizeStop.

    The problem is that padding-left: 0 can be used not in all situations. I described the approach how the problem could be solved in my posts to the issue.

    I'm developing now new free version of jqGrid, which you can download from here. It contains fixes of to the problem which you described. I recommend you to try the version. It contains many bug fixes and the features like new iconSet: "fontAwesome" option which improves the look of jqGrid. See some demos at the end of the page. If you would describe me any bugs (in the issues part, or on the stackoveflow) or RTL specific problems (or suggestions to improve RTL look) I would try to improve RTL support in jqGrid.