How to change drawer size

Flow
1

Hi all,
i’m developing a sample app using AppLayout. In the drawer section i put some tabs.
I need to increase the drawer width, since the tab’s labels are too wide and then they wraps.
Alternatively, can you tell me how to reduce the tab font?
Anyone can help me ?
Thanks in advance.
18171461.png

2

Hi Carlo,

You can do the following:

  1. Import your styles (assuming you’re using Java):
@CssImport(value = "./styles/components/app-layout.css", themeFor = "vaadin-app-layout")
  1. In app-layout.css do the following:
:host {
  --vaadin-app-layout-drawer-offset-size: 320px;
}
[part="drawer"]
 {
  width: var(--vaadin-app-layout-drawer-offset-size);
}

There’s an open ticket about this on GitHub: https://github.com/vaadin/vaadin-app-layout/issues/114.

If you want to make the font size of the tabs smaller:

@CssImport(value = "./styles/components/tab.css", themeFor = "vaadin-tab")

tab.css

:host {
  font-size: var(--lumo-font-size-s);
}
3

Hi,

Closely related question, so adding to this tread…

I need to modify the styling of the tabs in the drawer (which I’ve given a dark background). I can affect styling of tabs globally, but not just the tabset in the draw - Advice appreciated.

Thanks!

4

Hi Tino,

You can use a class name for those tabs and reference that in your CSS.

1. Apply class name

<vaadin-tab class="my-tab"> or tab.addClassName("my-tab").

2. Import styles

@CssImport(value = "./styles/components/tab.css", themeFor = "vaadin-tab")

3. Write CSS (tab.css)

:host(.my-tab) {
  // CSS
}