Dynamic scroll in Grid with fixed column headers with bug

atk4 / ui

Robust and easy to use PHP Framework for Web Apps

https://atk4-ui.readthedocs.io

MIT License

439 stars 104 forks source link

Dynamic scroll in Grid with fixed column headers with bug #2194

Open mkrecek234 opened 3 months ago

mkrecek234 commented 3 months ago

You have a grid with $g1->addJsPaginatorInContainer which also activates fixed headers
Good example is in demos, here: https://ui.agiletoolkit.org/demos/interactive/scroll-grid-container.php
You have small screen width, e.g. a mobile in portrait mode

Expected result:

You see fixed headers, and below you have scrollable rows

Today's behavior:

You see fixed header row
Second row, is again the header row which scrolls with the following content rows

Screenshot:

mvorisek commented 3 months ago

closing in favor of https://github.com/atk4/ui/issues/1988, I belive such improvent will fix this as well

mkrecek234 commented 3 months ago

Yes it would be fixed by using scrolling class on table - however we would still need our own javascript (which today is performed by JsScroll) which automatically loads further pages if you scroll at the end. That is the beauty of JsScroll which is not supported yet by FUI scrolling property as there is no callback.

mkrecek234 commented 2 months ago

There is another twist of this issue which is critical: I have a Tabs in a view - on a second tab I insert a grid with addJsPaginator, and say 2 rows. If the tab that I add it to is a static tab, the first data row is hidden behind the header row, as margin-top is set to 0px (erroneously).

If I change the tab to be a dynamically loading tab, the first data row is correctly shown below the header row (in my case the margin-top then is set to 46x....

Critical as data is not properly shown. I would opt to look into it, as refactoring to FUI scrolling with the javascript is too time-consuming and no contributor for that yet.

mvorisek commented 2 months ago

There is another twist of this issue which is critical: I have a Tabs in a view - on a second tab I insert a grid with addJsPaginator, and say 2 rows. If the tab that I add it to is a static tab, the first data row is hidden behind the header row, as margin-top is set to 0px (erroneously).

If I change the tab to be a dynamically loading tab, the first data row is correctly shown below the header row (in my case the margin-top then is set to 46x....

Critical as data is not properly shown. I would opt to look into it, as refactoring to FUI scrolling with the javascript is too time-consuming and no contributor for that yet.

please update your post above to contain minimal code to reproduce plus add screenshot