AppLayout UI Issues after migrating from 24 to 25

Flow
1

Hey there :slight_smile:

Colleagues have migrated a Vaadin 24 webapp to Vaadin 25 and now struggle with the AppLayout.
They only use the navbar on top as navigation as there are only 3 items. After switching to 25 the empty drawer space appears on the left side which wasn’t visible in Vaadin 24.

Is there any way to get rid of it? It looks similar to the picture in the vaadin docs under

When you compare with Vaadin 24 docs one can see the difference:

What would be the best approach? They tried with CSS (still older 24 structure, under src/main/frontend/styles/components/vaadin-app-layout.css):
.test2 {
vaadin-app-layout::part(drawer) {
display: none;
}
}
but that hasn’t had any effect. Probably not loading correctly, who knows.

Any suggestions welcome :wink:

Cheers
Mojo

2

Hi!
Thanks for reporting it. It is actually a regression, which I reported here based on your report.

Your workaround should work, but it should be placed on the file located at src/main/resources/META-INF/resources/styles.css file, since the CSS selector you shared is using the light DOM selector.

src/main/resources/META-INF/resources/styles.css

vaadin-app-layout::part(drawer) {
  display: none;
}
1 Like