rtl support in Chrome

[mahdiprog]

Hi when the grid has scroll in RTL and in Google Chrome there is issues:

• when you scroll vertically rows disappears
• when you scroll horizontally headers stick to left and columns scroll but there is not a problem in Firefox also column menu position is false (both Chrome and Firefox) you can check it in tutorial: RTL Support

[hvojdani]

chrome 58 bug for scroll calculation: https://bugs.chromium.org/p/chromium/issues/detail?id=720227 change that caused the bug: https://codereview.chromium.org/2716583002

[DmitryVovchuk]

This workaround doesn't works for me.Is anyone got it works inRTL???

[hvojdani]

Found Solution, ui-gird used this library codes for detect rtl scroll type: https://github.com/othree/jquery.rtl-scroll-type

this library codes changed 2 month ago, please update codes used from this library, every thing will be fine

line 11546 in ui-grid.js old code: var definer = angular.element('<div dir="rtl" style="font-size: 14px; width: 1px; height: 1px; position: absolute; top: -1000px; overflow: scroll">A</div>')[0],

new code: var definer = angular.element('<div dir="rtl" style="font-size: 14px; width: 4px; height: 1px; position: absolute; top: -1000px; overflow: scroll">ABCD</div>').appendTo('body')[0],

[DmitryVovchuk]

This solution works well for me thank you

[hvojdani]

problem solved in chorme 60 and earlier without above fix

[mozaffar]

I have chrome 75 and the problem is still there. The solution is very simple: add following style to your project css file:

.ui-grid-header-cell-row{
    position: sticky;
    right: 0;
}

[hvojdani]

Found Solution, ui-gird used this library codes for detect rtl scroll type: https://github.com/othree/jquery.rtl-scroll-type

this library codes changed 2 month ago, please update codes used from this library, every thing will be fine

line 11546 in ui-grid.js old code: var definer = angular.element('<div dir="rtl" style="font-size: 14px; width: 1px; height: 1px; position: absolute; top: -1000px; overflow: scroll">A</div>')[0],

new code: var definer = angular.element('<div dir="rtl" style="font-size: 14px; width: 4px; height: 1px; position: absolute; top: -1000px; overflow: scroll">ABCD</div>').appendTo('body')[0],

I am currently using this fix and no problem. the root cause is a wrong calculation of right to left type.

@mozaffar the problem exists after adding your style with chrome dev tools in this page: http://ui-grid.info/docs/#!/tutorial/Tutorial:%20120%20RTL%20Support (to reproduce scroll after field15)

problem solved in chrome 60 and earlier without the above fix

maybe the chrome team changed RTL things again.

[tomyam1]

None of the solution proposed here worked for me.

The solution by hvojdani is no longer needed since RTL scrollLeft type is now detected correctly in Chrome (you can verify this by running the type detection in the console)

The soltion by mozaffar make things better in Chrome (still not perfect aliment) but worsened the situation on Firefox.

The following solution worked for me on all browsers:

@hvojdani @mozaffar can you give it a try?

app.run(function ($templateCache) {
  $templateCache.put('ui-grid/ui-grid-header',
    '<div role="rowgroup" class="ui-grid-header"> <div class="ui-grid-top-panel"> <div class="ui-grid-header-viewport"> <div class="ui-grid-header-canvas"> <div class="ui-grid-header-cell-wrapper"> <div class="ui-grid-header-viewport-padding" ng-style="colContainer.headerCellWrapperStyle()"> </div><div role="row" class="ui-grid-header-cell-row"> <div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.uid" ui-grid-header-cell col="col" render-index="$index"> </div></div></div></div></div></div></div>'
  );
});

It moves the margin from the .ui-grid-header-cell-wrapper element to a new .ui-grid-header-viewport-padding element (the margin that is added by headerCellWrapperStyle())

The core issue seems to be that Chrome miscalculates scrollWidth of the .ui-grid-header-viewport element. You can confirm the by running document.getElementsByClassName('ui-grid-header-viewport')[0].scrollWidth before and after the column issues starts. scrollWidth should not change because a margin is added but it does.

It fixes the RTL issues with Chrome and Safrai (IE and Firefox worked fine before and works fine now).

http://plnkr.co/edit/pi0qI8opO7qJkaQoZz0p

Chrome 76

Before fix:

After Fix:

Safari

Before fix:

After fix: