R2L Support in Edge & Chrome on "Virtual-X: True"

[irshaid]

Hello everybody,

I'd like to ask if anyone has encountered the problem where scrolling horizontally does not load the yet-to-be-loaded-columns on Chrome and Edge. The columns I am trying to display exceed 100 columns.

It works on
Firefox in LTR and RTL
Edge only in LTR (Not RTL)
Chrome only in LTR (Not RTL)

Appreciate your help.

[paramvir]

Do the columns display after some lag or do they not load at all.

Could you share some screenshot or a jsfiddle/ stackblitz.

https://jsfiddle.net/adbghz7v/7

[irshaid]

Hello Paramvir,

They do not load at all on Edge/Chrome, sometimes the columns display when I zoom-in and out. This is the link for the video that shows the issue (I have used WeTransfer): https://we.tl/t-0y4MLxDrHn

I cannot share it on jsfiddle as I am using C# MVC. I have used Virtual-X: True and the Virtual-Y: True in my code.

[paramvir]

Please recheck by hiding the number column.

Do you see any error in the browser console.

[irshaid]

I just disabled the numbered column, the issue still persists in Arabic.

Here's the link to the video.
https://we.tl/t-RYKITRhUUh

The 404 that's appearing in the console is not related to paramquery, it's an icon that has failed to load.

[paramvir]

Have you added rtl attribute in html and used the rtl variant of pqgrid stylesheets correctly?

I've created this jsfiddle for 10,000 columns and I don't see any fundamental issue in it.

https://jsfiddle.net/urkdynp2/1/

[irshaid]

Hello Paramvir,

Thank you very much for the fiddler link, I have created a similar one that I have replicated as much as I could:
https://jsfiddle.net/h4b2591L/1/

This is the video of how it behaves on my end: https://we.tl/t-N2w4NZX17w

I made sure that my browser is up-to-date on Chrome (I tried in incognito/regular - with and without extensions enabled still had the same problem): Version 129.0.6668.59 (Official Build) (64-bit)

I have tested the fiddle on 7 computers, only 2/7 work, and the ones that don't work do not output console errors.

I am open to having a quick meeting to show you the behavior.

[paramvir]

Could you mention the OS version. I couldn't reproduce the issue on Windows OS with both Edge and Chrome ( latest 2 versions ).

I was able to reproduce the issue on a MAC OS in jsfiddle and stackblitz. However the issue gets resolved if I run the same examples on a web page. I guess it's because both tools use iframes and main document doesn't have dir="rtl"

Please check by assigning the dir="rtl" attribute to the document body. Are you using iframes by any chance?

[irshaid]

We are using Windows 11 Pro 64-bit (10.0, Build 22631) -- I got it from `dxdiag`.
And the version of Chrome: Version 129.0.6668.90 (Official Build) (64-bit)

We are not using an iFrame in any of our projects. We are using dir="rtl" when we display the grid when it is properly required.

[paramvir]

Have you assigned dir="rtl" to the whole page ( document.body ) or only a section of the page?

[irshaid]

i have tried to assign the dir="rtl" on body , on html , on the div that contain grid and it did not work

[irshaid]

Hi


After going through the code, I found that if you change the scale for the screen in Windows from 125% to 100%, the issue appears.

please can you check if you have the same issue after changing the screen scale?

[paramvir]

Please use this patch to fix the RTL issue.

Code: [Select]

    //fix for RTL.
    pq.scrollLeft = (ele, val) => {
        if (val == null) {
            return Math.abs(ele.scrollLeft)
        }
        else {
            val = Math.abs(val);
            if ($(ele).css('direction') == 'rtl') {
                val = -1 * val;
            }
            ele.scrollLeft = val;
        }       
    }
    pq.scrollLeftVal = (ele, val) => Math.abs(val)

Demos in RTL can be viewed by appending rtl to the url.

https://paramquery.com/pro/demos?rtl