MainMenu right align MenuItem

I wish to have some MenuItem’s align to the right while the rest stay aligned to the left.
Anyone knows how?

EDIT: In other words I made the menu 100% wide and I wanted to make some i18n links that change country or something, I suppose it’s not really intended for MenuBar and I should use a separate floating div

Take a HorizontalLayout and a second MenuBar.

Probably way to late to matter, but I found this when I searched for a solution to the same problem. I solved by adding a CSS class:


MenuItem about = menuBar.addItem(...);
about.setStyleName("menuRight");
 

and in my CSS:


.v-menubar-menuitem-menuRight {
	position: absolute;
	right: 10px;
	top: 0;
}
 

FYI if you want more than one MenuItems on the right side of the menu bar the following snippet is needed as well in your css

float: right;

I have three .scss files in my /VAADIN/themes/myProject folder (styles.scss, myProject.scss and addons.scss).In which file should the above CSS class be added?

NOTE: I use Eclipse IDE + Win 7 + Vaadin 7.x

Hey Dineshkumar,

I’d recommend putting any custom SCSS in your project’s theme file (myProject.scss)

Thanks for the advice, Joacim.

Unfortunately, this won’t work on Firefox because the menu bar itself has a 100% width and the items have an inline-block display, so after floating the buttons they will get outside the container (to the bottom of the menu bar itself). However, it will work on Chrome and IE.

If anyone knows of a workaround…