MenuItem Width

Vaadin 6 / 7 / 8 Framework UI
1

Hi, I have the following ‘problem’.
I have a MenuBar with one item (which has more items etc)…
MenuBar has width 100%, with only one item, but the item doesn’t take ALL the menubar space, but only the space needed for the text to appear.
Has anyone got any ideas on how to fix this??
I’m attaching a screenshot, my idea is that the item “Φορμες” is 100% width… As you can see the menubar IS 100% width.

Thanks!

28446.png

2

The reason this happens seems to be setting the width to 100%. If the width is undefined then it will take only as much space as necessary. With 100% the component will expand to take the available slot space around it.

What is the result you are trying to achieve by setting it to 100%?

3

What I want is this:
The MenuBar to be 100% width (in order to allign with other components of this form)
The MenuItem to use all 100% width available from the MenuBar and not only the space needed from the letters to view…

28447.png

4

Roughly what I am trying to achieve is at the following mspaint screenshot…!

28448.png

5

I would suggest looking into the
PopupButton
 addon. You can set it to 100% width and modify the popup freely.

You can also use CSS to modify things. For example if all you need is one item in the MenuBar then you could try the following

MenuBar menuBar = createMenuBar();
menuBar.setWidth(100, Unit.PERCENTAGE);
menuBar.addStyleName("one-button-bar")

Then you can add the following to your theme’s scss file :

.one-button-bar { .v-menubar-menuitem { width:100%; } } You can take a look at the
Book of Vaadin
 and page 208 (6.25.3) has the styles you can use for styling.

I’ve attached a screenshot of what I get as a result. The PopupButton is still a button so the caption will be rendered in the component if you are using it in a FormLayout so you might want to wrap it in a custom component to get exactly the result you want.
28449.png

6

CSS solved the ‘issue’… !! I’ve tried popupbutton as well, but I prefer the menubar instead (in the specific location)…

Thanks Mirjan for the complete solution!! :slight_smile:

7

Glad to help :slight_smile:

8

Using Vaadin 8.2 this does not work completely.

The problem is that the highlighted item selected in the submenu is wider than its “box”. See attachment for an example.
40207.png