MenuItem Width

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!
 

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..

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

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.

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.