Navigation bar in the middle of the screen

[mkopyczok]

Hi Viritin team,

I am using pagination grid with 20 elements and the content of the gird doesn't fit the default page size so I have a scrollbar available.
When I start to scroll down, for a very short moment the (bottom) pagination bar doesn't move and it stays in the middle of the screen, when I scroll to the bottom it's going back to the right position.
Here it the screenshot:

I also noticed that initially I have 2 scrollbars visible, but later grid scroll disappears:

I am not sure if I am using some wrong page settings or it's a bug?

[mstahv]

Hi!

Some odd layout bug. The PagingGrid uses header/footer row to place the pagination bar, technically the bug is most likely there. Could you provide a test case how to reproduce the isssue? It might also help to know which browser/OS you are using (sometimes these are platform specific). I can then either fix it in Viritin or create an issue to flow-components repository.

[mkopyczok]

Hi,

Thank you for your reply.
Please find a demo app in the attachment. You can just run the app and slowly scroll the screen.
skeleton-starter-flow-spring-24.zip

You should see similar result:

I am using ubuntu and the problem I can see in Chrome and Firefox.

[mkopyczok]

Hi Matti,

Did you have time to check this issue?

Thanks,
Michał

[mstahv]

Hi, I spent enough time to reproduce the issue and indeed looked like it is Vaadin Grid issue. Didn't reduce the case enough yet or figure out a workaround. I'm on a vacay and busy with some pro bono work with a big sport competition, so can't promise to look into this very soon.

[jorgheymans]

As i'm a stakeholder here as well :-P Any chance this could be looked at ? I'm happy to file an issue under Grid if needed and try to achieve something there if possible via support hours usage.

[mstahv]

I reduced the issue to this: vaadin/web-components#8023

[mstahv]

A workaround you might be able to use:

    // fixing row height with CSS seems to workaround the bug
    // measure value from rendered grid with web inspector, 69 happened to be the height in the reduced test
    VStyleUtil.injectAsFirst("""
    vaadin-grid::part(row) {
        height: 69px;
    }
    """
    );

[mkopyczok]

Hi Matti,
I have seen you on Vaadin conference ;)
We have dynamic row height so your workaround doesn't work for us.
I have also tried to replace vertical layout with div structure, but still it doesn't work.
Do you have any other workaround idea?
Thanks.

[mstahv]

The components team seem to have been given "low/minor" classification for the issue 😤 Comments/upvotes there or prioritising that might be the easiest/fastest way to get this fixed.

A potential workaround would be to move the "navigation bar" out of the vaadin-grid, web component. I don't think the the containing layout matters here at all. So then the PagingGrid should essentially be extending Composite instead of Grid. But that would break backwards compatibility at least to some extend and require to proxy a ton of Grid API.