VerticalLayout different background color after upgrade to vaadin 24 from 14?

Flow
1

I don’t have any custom styling for VerticalLayout (At least for it’s color).
However, I will still show my changes related to @Theme, just in case they are causing the issue.

Previously, when I was using Vaadin 14, I could apply @Theme directly on MainView.java.
My theme folder was myapp, and all CSS files were inside that folder:

C:\Users\xxx\eclipse-workspace\projectA\frontend\themes\myapp

Example (Vaadin 14):

@Route("")
@Theme(themeFolder = "myapp")
@CssImport(value = "./themes/myapp/grid-style.css", themeFor = "vaadin-grid")
@CssImport(value = "./themes/myapp/vaadin-select-style.css", themeFor = "vaadin-text-field vaadin-text-area vaadin-integer-field vaadin-select multiselect-combo-box multiselect-combo-box-input vaadin-list-box")
@CssImport(value = "./themes/myapp/combo-box-item-style.css", themeFor = "vaadin-combo-box-item vaadin-combo-box-overlay")
@CssImport(value = "./themes/myapp/notification-card.css", themeFor = "vaadin-notification-card")
@CssImport(value = "./themes/myapp/upload-style.css", themeFor = "vaadin-upload vaadin-upload-file")
@CssImport(value = "./themes/myapp/vaadin-text-area.css", themeFor = "vaadin-text-area")
@PageTitle("Main")
public class MainView extends AppLayout {
}

In Vaadin 24, I believe @Theme must be moved to an AppShell configurator class.
Here is my current code:

@Theme(value = "myapp")
@CssImport(value = "./themes/myapp/grid-style.css", themeFor = "vaadin-grid")
@CssImport(value = "./themes/myapp/vaadin-select-style.css", themeFor = "vaadin-text-field vaadin-text-area vaadin-integer-field vaadin-select multiselect-combo-box multiselect-combo-box-input vaadin-list-box")
@CssImport(value = "./themes/myapp/combo-box-item-style.css", themeFor = "vaadin-combo-box-item vaadin-combo-box-overlay")
@CssImport(value = "./themes/myapp/notification-card.css", themeFor = "vaadin-notification-card")
@CssImport(value = "./themes/myapp/upload-style.css", themeFor = "vaadin-upload vaadin-upload-file")
@CssImport(value = "./themes/myapp/vaadin-text-area.css", themeFor = "vaadin-text-area")
public class AppShellConfig implements AppShellConfigurator {
}

Here is how I create the VerticalLayout:

VerticalLayout layout = new VerticalLayout();
layout.setClassName("sidemenu-menu");
layout.setSizeFull();
layout.setPadding(false);
layout.setSpacing(false);
layout.getThemeList().set("spacing-s", true);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);

image

the css for sidemenu-menu:

.sidemenu-header {
  height: var(--lumo-size-xl);
  box-shadow: var(--lumo-box-shadow-s);
}
.sidemenu-header h1 {
  font-size: var(--lumo-font-size-l);
  margin: 0;
}
.sidemenu-menu #logo {
  box-sizing: border-box;
  box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
  padding: var(--lumo-space-s) var(--lumo-space-m);
}

Previously, the background was white when I defined a VerticalLayout.
Old color:
image

new Color: (The grey on the left is Vertical Overlay)
image

Why is it showing a grey background now in Vaadin 24?

2

The Vertical overlay becomes grey at vaadin 24, but the horizontal overlay is still white at vaadin24.

I went to inspect and untoggled all the style being applied one by one:
I noticed when I untoggle --lumo-shade-5pct

image
image334×752 30.9 KB

The vertical over lay color becomes white.
I am a bit confused on this behavior.
so this vertical over is a drawer, and I am looking at the file from node_modules -> @vaadin->app-layout->theme->lumo->vaadin-app-layout-styles.js

I saw:

:host([primary-section='drawer']:not([overlay])) [part='drawer'] {
      background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
    }

seems like the vaadin 24 is making the drawer (left navigation bar on my screen) to have a grey background color?

I guess the solution is to overwrite this style with white color

3

I have no idea what’s going on, but have you actually checked what the background-color css value being applied to the vaadin-vertical-layout in question is, using the browser devtools (by selecting the element and looking at what it says in the Styles panel, or, even better, the Computed panel)?

My guess is that the gray you’re seeing is not the VerticalLayout itself, but some other element (perhaps the AppLayout drawer?) that you’re seeing. VerticalLayouts are transparent by default, not white, so whatever is behind it will show through.

Is the VerticalLayout in the drawer area of an AppLayout?

4

Hi @rofa,
I did look at the devtools on Styles panel

image
image820×850 72.7 KB

and computed panel,
image
image280×625 12.9 KB

I don’t see any background-color being applied

Yes, I believe the VerticalLayout is in the drawer area of an AppLayout
image

5

As you can see in the NavBar Placement section, the drawer will have a light grey color if
setPrimarySection(Section.DRAWER) is used.

vaadin-app-layout::part(drawer) {
  background-image: none;
}

should fix it.

1 Like
6

Yes, the AppLayout’s drawer background, when it’s set as the “primary section”, has indeed changed from white (or transparent) to gray between V14 and V24.

1 Like