SideNav overlaps entries

Flow
1

I’m using Vaadin 24.2.3. I have a SideNav (as suggested in the documentation, in a Scroller put into the drawer of an AppLayout) with two SideNavItem, each with sub items (so, a two level structure). Problem is, the first SideNavItem, when expanded overlaps the second. I attach two images with the “First” SideNavItem not expanded and expanded.

Here is the code, very basic:

SideNav sideNav = new SideNav();

sideNav.setCollapsible(false);
sideNav.setExpanded(true);
sideNav.setSizeFull();

SideNavItem firstSideNavItem = new SideNavItem("First");
firstSideNavItem.setExpanded(true);

firstSideNavItem.addItem(new SideNavItem("First-First", FFView.class));
firstSideNavItem.addItem(new SideNavItem("First-Second", FSView.class));
firstSideNavItem.addItem(new SideNavItem("First-Third", FTView.class));

sideNav.addItem(firstSideNavItem);

SideNavItem secondSideNavItem = new SideNavItem("Second");
secondSideNavItem.setExpanded(true);

secondSideNavItem.addItem(new SideNavItem("Second-First", SFView.class));
secondSideNavItem.addItem(new SideNavItem("Second-Second", SSView.class));
secondSideNavItem.addItem(new SideNavItem("Second-Third", STView.class));

sideNav.addItem(secondSideNavItem);

Div div = new Div(sideNav);
div.setSizeFull();

addToDrawer(scroller);

I used both Chromium and Edge, same result.

I checked the CSS of the <vaadin-side-nav-item> elements (in particular the “First-First” one) but I wasn’t able to see anything that (AFAIK) produces the overlap. For example. the “display” is always “block”.

Changing the setExpanded(true) to false does not change. Even creating a root SideNavItem and putting “First” and “Second” under it does not change. Of course, I performed a maven clean and the Vaadin dance and restarted the IDE (IntelliJ) multiple times.

Does someone have any hint? I haven’t found a related SideNav bug issue in GitHub, nor any message here in Discord. Is there something I’m missing?

Thanks a lot.
image.png
image.png

2

I would suggest to remove anything not needed to see if it’s a general problem. Like setFullSize, Div and Scroller. First thing that comes to mind is the Scroller interfering cause the issue isn’t present in the docs

3

Thanks for answering. For the moment, I tried to substitute the Scroller with a VerticalLayout, but it did not work.

4

I added the sideNav directly in the AppLayout’s drawer with addToDrawer(sideNav) but nothing has changed.
image.png

5

Just tested it in start.vaadin.com and couldn’t get your problem to be visible, is it possible that you have some css that is interfering here?

6

Gotcha! I had this:

vaadin-app-layout vaadin-side-nav-item {
  font-size: var(--lumo-font-size-s);
  height: var(--lumo-size-l);
  font-weight: 600;
  color: var(--lumo-body-text-color);
}
7

The problem was the height: var(--lumo-size-l);. Removing it, everything works fine. Sorry for bothering. It was a stupid mistake. This CSS was carried along when the app was updated from tabbed layout to SideNav. Many thanks!