tonytomov / jqGrid

jQuery grid plugin
www.trirand.com
2.85k stars 1.2k forks source link

Frozen columns create offsets when grid has scrollbars #841

Closed Krokador closed 6 years ago

Krokador commented 7 years ago

Been playing around with the latest version of the code here, as I have a project where I need to have info that can be toggled from visible to hidden inside a grid, and thus causes the rows to have variable height.

There's always been a slight offset in the grids when scrolling down to the bottom as we often have both an horizontal and vertical scrollbar showing up (limited space, lots of data).

https://jsfiddle.net/b9c3644e/2/ is a fairly simple example using the github files in order to be up to date. You can see the offset between the frozen columns and the rest by simply scrolling down to the bottom of the grid. You can also toggle some info in the 2nd line by scrolling to the far right and clicking the text (I call setFrozenColumns again after showing/hiding the text to adjust the frozen bdiv)

As it turns out, 2 small changes in the code seem to fix those issues for IE11, chrome and FF (have not had a chance to test in anything else yet).

In setFrozenColumns function, line 5383

$($t.grid.fbDiv).height($($t.grid.bDiv).height() - 14); if I replace 14 by 17, then I no longer have an offset towards the bottom of the grid $($t.grid.fbDiv).height($($t.grid.bDiv).height() - 17);

Then line 5387: mh.push($(this).height());

if I use outerHeight() instead of height, then the row lines also match up better. mh.push($(this).outerHeight());

I have only tested these changes locally as I do not know how to overwrite parts of the jqgrid code to provide a working example of the fix in the jsfiddle.

Thank you.

tonytomov commented 7 years ago

Hello,

First of all thank you for investigations and providing a recommendation to fix.

This is really curious - the example you provide in jsfiddle work perfectly with the latest FF and Chrome on Linux. The problem is shown only in Windows in all browsers FF, Chrome IE. Do not have currently Edge to test, but it seems maybe the same.

The fix you recommend works fine in Linux and Windows. It works OK with jQuery UI and Bootstrap CSS frameworks.

Thanks again I have committed the change in GitHub and will continue to test, because it seems that currently this is the most problematic feature we have.

Kind Regards, Tony

Krokador commented 7 years ago

Thank you for making the changes so quickly.

I do plan on testing on Mac, and try to get access to Edge to see if similar issues are encountered, so I will try to let you know how it goes when I do. I do not have access to Linux right now, but my best guess is it's got something to do with the way OS calculates sizes, or maybe the screen resolution?

I was a little surprised that the 17 did the trick. There was always exactly 3px extra at the bottom of the grid, so I found the code that set the height, and the -14,, which already seemed quite arbitrary. It might be an idea to try to calculate that offset off of something concrete going forward, to avoid causing issues by manipulating the styles down the line?

tonytomov commented 7 years ago

Thanks for recommendation about the automatic calculation. This is exactly what I mean. We have such one for the vertical scroll bar, so I think it will be not difficult to do it for the horizontal one. I will see if I can do this to the end of week.

Thanks.

Kind Regards, Tony

ioriwellings commented 6 years ago

mark it.