Horizontal Menubar

Vaadin 6 / 7 / 8
1

Hi,

I trying to create a horizontal menu and I want put the last button in the right corner but something is go wrong. I leave my code:

public class Principal extends Composite implements View{

//	Navigator menu;
	
	public Principal() {
		HorizontalLayout horizontalLayout = new HorizontalLayout();
		MenuBar menuBar = new MenuBar();
		
		horizontalLayout.setWidth("100%");
		
        String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
        
//      Fuego
        File file = new File(basepath + "/VAADIN/themes/mytheme/img/fire.png");
		FileResource resource = new FileResource(file);
		menuBar.addItem("", resource, null).setDescription("Incendio");
		
//		Agua
		file = new File(basepath + "/VAADIN/themes/mytheme/img/water.png");
		resource = new FileResource(file);
		menuBar.addItem("", resource, null).setDescription("Inundación");
		
//		Huracan
		file = new File(basepath + "/VAADIN/themes/mytheme/img/hurricane.png");
		resource = new FileResource(file);
		menuBar.addItem("", resource, null).setDescription("Huracán");
		
//		Volcanes
		file = new File(basepath + "/VAADIN/themes/mytheme/img/volcan.png");
		resource = new FileResource(file);
		menuBar.addItem("", resource, null).setDescription("Volcán");
		
//		Logout
		file = new File(basepath + "/VAADIN/themes/mytheme/img/logout.png");
		resource = new FileResource(file);
		menuBar.addItem("", resource, null).setDescription("Cerrar sesión");
		
		menuBar.setHeight(90, Unit.PIXELS);
		menuBar.setWidth("100%");
		
		horizontalLayout.addComponents(menuBar);
		
		setCompositionRoot(horizontalLayout);
	}
}

I use this in mytheme.scss, but I can’t never get it:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
  
	.v-menubar .v-menubar-menuitem:last-child {
		float: right;
	}
}

Someone know where is the problem? Thanks for the help.

2

Hello Carlos,

I think you can use:

margin-left:auto;

and the component with that css rule will be placed on the right part of the horizontal layout.

3

Diego Sanz Villafruela:
Hello Carlos,

I think you can use:

margin-left:auto;

and the component with that css rule will be placed on the right part of the horizontal layout.

Thanks for the answer but I solved it time ago, you can find my option (and my others exercises) in this url:https://github.com/Dwarf667/MisProyectos/tree/master/FormacionEjemplo6

thanks again.