How to set menu bar button width in 23.3.x?

Flow
1

Hello,
we are still at 23.3.x at the moment.
We try to tell the vaadin-menu-bar-button to use 100% width, but fail to find the correct styling rules for this

The “Export images” menubar button should also take up all width as the regular buttons above and below it.

We tried with this, but nothing happens
:host [part=“menu-bar-button”] {
background-color: red;
width: 100%;
}
grafik.png

2

That should work. Do you have that css in components/vaadin-menu-bar.css in your theme?

3

I placed it in /frontend/styles (and also in /frontend/styles/components) but it seems to be picket up (Using maven build)

4

No need for a @CssImport, correct?

5

You have no theme folder?

6

I tried /frontend/themes//components/vaadin-menu-bar.css too but to no avail

7

That should be the correct place… even tho I’m wondering, why are you concerned with the button’s width? What would happen if you customize the outer menu bar? You only have a single button anyway

8

The whole dialog looks like this, and we just combined them image export behind a single “button” to save place

9

grafik.png

10

And it’s in a dialog, is that the problem?

11

Should not be a problem

12

So, you need to either have it in the theme folder, or load it with @CssImport using the themefor parameter, e.g.
@CssImport(value=“menubar.css”, themeFor=“vaadin-menu-bar”)

If you go with the theme folder, you also need to load that theme using the @Theme annotation.

13

That location you had it in the components subfolder is correct and should work, provided that you also have the theme annotation for that folder.

14

Thanks, this did solve the problem

15

:+1: glad to hear it!