Since upgrading from Vaadin 24.8.8 to 24.9.0, I get a two scroll bars in the drawer section of an application if not all side items are visible. Any ideas?
Here is a screenshot of the Vaadin 24.8.8 app. It has only ONE scrollbar in drawer section.
And here is a screenshot of the Vaadin 24.9.0 app. It has TWO scrollbars.
Same code and styles. All I did is upgrade to Vaadin 24.9.0.
Thatās interesting. We hardly made any changes to UI components at all in 24.9.
Could you share a shot from the browserās DOM inspector that shows the layout in the drawer?
OK. I will get you that info. For now, I fixed it using the following style hackā¦
vaadin-app-layout::part(drawer) {
overflow: hidden !important;
}
Hi, is this issue being addressed? Since we updated to 24.9.0, we also are experiencing the exact same issue. We even went ahead and updated to 24.9.2 and there is no improvement.
Does not look like it as been addressed. I still have the issue in Vaadin 24.9.5.
I donāt have such issues. Can you share a reproducible example?
I also encountered similar issues when I upgraded.
But then, I was also explicitly using a Scroller.
addToDrawer(createHeader(), new Scroller(createSideNav()));
Removing the Scroller solved the problem for me.
Removing the Scroller fixed the issue for me as well. Thanks. My code was based the code generated by start.vaadin.com which looks like thisā¦
private void addDrawerContent() {
Span appName = new Span("suitelife-template");
appName.addClassNames(LumoUtility.FontWeight.SEMIBOLD, LumoUtility.FontSize.LARGE);
Header header = new Header(appName);
Scroller scroller = new Scroller(createNavigation());
addToDrawer(header, scroller, createFooter());
}
You can reproduce it in start.vaadin.com
Create a bunch of views and then resize your screen and show the navigation. It should looks something like the screen capture below. Notice the double scroll bar.
Looks like the scroller is needed / useful to keep the drawer footer visible.
Iām not sure what has changed, and why the overflowing contents of the scroller seem to escape the scroller container and produce another scrollbar in the drawer. The size of the scroller component seems correct, yet if its contents overflow it, it ends up creating the other scrollbar.
One fix I can manage to come up with is to set contain: paint; on the <vaadin-scroller> element.
I believe this is a Chrome bug/regression.
I have observed it on MacOS + Safari
Yeah, I can see it Safari as well. But not in Firefox.
I canāt tell if what Iām about to describe is exactly the same issue as reported here, but all of a sudden, having happened to recently update Chrome and Edge everywhere, Iāve started seeing this type of bug on many ā though not all ā machines across Windows, Mac, and Ubuntu. In my Vaadin appās case, it happens with the LoginOverlay component when either its āUsernameā or āPasswordā fields receive input focus. Indeed, you can easily see it happening right now on Vaadinās own documented LoginOverlay samples. Here is one such example:
Specifically, when you load that page initially, thereās no vertical scrollbar on the page (assuming you have your window maximized). But once you click inside the āUsernameā text field, a full-height scrollbar will inexplicably appear on the page automatically.
It happens now in Chrome, Edge, and Safari, but not in Firefox. I know it didnāt used to happen at all until recently.
Could it be related to recent changes to overscroll-behavior or scroll-state in Chrome 144 or even 143 before it?
Thanks, @jason.unsworth, for raising up this issue once more. Iām not sure if the Login Overlay issue you experience is the same (I couldnāt reproduce it on the docs demo you shared), but the original issue about App Layout drawer and Side Nav is a regression from this change:
The .sr-only element inside <vaadin-side-nav-item> is using position: absolute, but none of the parent elements of the side-nav-item contain that position, and it ends up staying stuck in place and not scrolling together with itās parent, causing all parent scroll containers to ānoticeā it. There seems to be a difference between Chrome/Safari and Firefox regarding that behavior.
Iāll prepare a fix for that.
Thanks for your response, Jouni.
My issue with the ever-present scrollbar on Vaadinās login form, as described above, did indeed turn out to be a separate problem that Iāve confirmed was caused by a recent update to the 1Password browser extension for Chromium-based browsers and Safari. The 1Password Support team has since indicated that they have it on their radar to fix now.
So my apologies for muddying the waters here.
