ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: irshaid on September 05, 2024, 07:55:06 pm
-
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.
-
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
-
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.
-
Please recheck by hiding the number column.
Do you see any error in the browser console.
-
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.
-
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/
-
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.
-
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?
-
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.
-
Have you assigned dir="rtl" to the whole page ( document.body ) or only a section of the page?
-
i have tried to assign the dir="rtl" on body , on html , on the div that contain grid and it did not work
-
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?
-
Please use this patch to fix the RTL issue.
//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