Author Topic: Browser zoom and column width adjustment  (Read 3150 times)

rickpqu

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Browser zoom and column width adjustment
« on: December 21, 2018, 09:07:09 pm »
Hi, this happens on Chrome but not on Firefox nor Edge. When there are many columns, and if Chrome's tab is zoomed in, the first column header's right border can be grabbed and dragged to change the column's width, but this grab point starts to deviate from the border line more and more as the later columns are tried. This problem is not noticeable with a few columns, but with about 30 columns over maybe 3000 pixels for example, the gap becomes quite big in the rightmost column. I use pro 3.4.0.

rickpqu

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Browser zoom and column width adjustment
« Reply #1 on: December 21, 2018, 09:38:22 pm »
With some investigation, I found that pq-grid-col-resize-handle's "left" style value becomes more off from the actual location of the rightside border line.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6323
    • View Profile
Re: Browser zoom and column width adjustment
« Reply #2 on: December 21, 2018, 10:25:26 pm »
I don't see the mentioned issue in this demo ( 10000 columns ) for v3.4.

https://paramquery.com/pro/demos33/infinite

rickpqu

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Browser zoom and column width adjustment
« Reply #3 on: February 07, 2019, 05:10:38 am »
Thanks for the demo. I dug a bit more. The attached image shows the problem. The image was created in the following way.

I created a table using the code here https://docs.google.com/document/d/19Oyih_STB2K81AJ85xmpi_vSo6_UJNutyKgT7MyTiDE/edit?usp=sharing.

The zoom level of Chrome browser was 125%.

Then, I clicked the first column, and typed the right arrow key to move toward the last column. Up to the second last column, the header column and the data column were perfectly aligned. Then, with the right arrow key stroke to reach the last column, suddenly the discrepancy between the header column borders and the data column borders happened as shown in the attached photo.

The divs of class "pq-grid-col-resize-handle" were aligned with the data column borders, thus creating the original problem of this post.

I observe this only with Chrome and zoom-in. At 100% zoom level, Chrome also displays the table correctly.

Any help would be appreciated. If you need any more information on the issue, please let me know.
« Last Edit: February 07, 2019, 05:16:14 am by rickpqu »

rickpqu

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: Browser zoom and column width adjustment
« Reply #4 on: February 07, 2019, 09:53:58 pm »
I found that virtualX: false caused the problem. virtualX: false solved the issue, but in the past I set it to false to avoid the change in the height of the header as I scroll the table horizontally.

So, virtualX: false has the problem of changing header height and virtualX: true has the problem with grabbing column borders.

Is it possible to set virtualX: true but somehow figure out the maximum height for header cells and set a fixed height to the header cells? or any other solution?