columns shift in specific width configuration and virtual scroll
shlomiassaf opened this issue · comments
What is the expected behavior?
Columns should not shift when scrolling
What is the current behavior?
When column widths are defined in a way that one column has no width defined, and only minWidth set, when scrolling a longer lists columns get shifted.
What are the steps to reproduce?
Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: stackblitz.com/edit/pebula-ngrid-starter
cc @t00
@t00 I tried reproducing this, but no luck, can you help?
https://stackblitz.com/edit/pebula-ngrid-starter-lkwpvc?file=app/app.component.ts
I was able to reproduce the problem after making some changes: https://stackblitz.com/edit/pebula-ngrid-starter-1zlhez
I cut down the number of directives to make it simplest possible to reproduce and changed the row height to 30px by:
- adding a style
.pbl-ngrid-row {
min-height: 30px !important;
}
- Setting the vScrollFixed attribute with a value of 30:
vScrollFixed="30"
Looks like changing the row height causes the issue but not immediately.
Steps to reproduce:
- Open the grid in a maximized browser window
- Scroll down a little and back to top
- Make window not maximized
- Scroll down a little and back to top
- Make window maximized
- Scroll down - you will see the rows coming from the bottom with incorrect sizes
Surely grid after minimizing/maximizing loses the information about virtual row height somehow and for some reason this is happening without window maximizing in the app I am working on, possibly due to the parent component being tam-splitter container which is changing its size dynamically during initialization.
I noticed that for the incorrectly sized row, width and max-width are changed to pixels while correctly sized rows have percentage as specified in column definitions.
An update - after removing vScrollFixed="30" (defaults to vScrollAuto) and the custom row height (defaults to 48px) the problem is still reproducible. Only maximizing and restoring window twice is needed to trigger the issue - that should narrow down the problem as more generic.
I was able to reproduce it...
For some reason, resize events are not fired or fired but does not result in updates to the cells.
I'll check
Many thanks, much appreciated!
@t00 Note that the latest release (1.0.0-rc.10) does not fix this yet, it includes the other things you pushed.
@shlomiassaf sure, no worries - thank you for including these.
Also when experimenting I found much easier way to reproduce the issue above - just open https://pebula-ngrid-starter-1zlhez.stackblitz.io/ in a smaller window and once it loads, resize window. Once you do and scroll, bottom rows stay broken (have pixel widths)
Lol, was just about to write you about this way to reproduce it...
Anyways, what happens is that when you load the grid on a small viewport the cells update accordingly but when you maximize, resize events kicks in to update, however the raw cells are never actually updated...
This does not occur when resizing through API or mouse drag because that operation will trigger a direct update to the widths...
It does happen in this case because the resize events are indirect and the handlers for those does not properly trigger updates to the cell
What is interesting is why when scrolling down (without resizing), bottom rows have their widths not updated.
It's virtual scroll so there are no "bottom" rows....
All row elements (and their child cell elements) are not removed, their data is just replaced when you scroll, based on the scroll offset.
Virtual scrolling will render row elements that will fit the viewport of the grid but it also require some buffer to perform well so top and bottom ends get some more rows that are not visible...
The buffer length might change so sometimes rows are added/removed from the buffer but i've checked and they get the same width's.
Ok, this was a big change, let's hope it doesn't have regressions :(