Search code examples
cssvaadinmenuitemmenubarvaadin8

Vaadin Menu Bar, space between caption and icon for an item

I have a menu bar with some items. Each item has a caption and icon. Problem is that the caption and icon are very close to each other. Here it is:

image
How can I set some space between caption and icon?

This is my simple code:

MenuBar menuBar = new MenuBar();
menuBar.setSizeFull();
menuBar.addStyleName(CSS.commom-menu-bar);
menuBar.addItem("import", VaadinIcons.DOCTOR,(selectedItem) ->  importDocs());
HorizontalLayout menuBarLayout = new HorizontalLayout(menuBar);
menuBarLayout.setWidth("100%");
setContent(menuBarLayout)

and css:

.v-menubar-common-menu-bar{
direction: rtl;
text-align: right !important;
}
Solution

  • You have to add a bit more CSS for your Icon-element:

    .v-menubar-commom-menu-bar{
    direction: rtl;
    text-align: right !important;
}

.v-menubar-commom-menu-bar .v-icon
{
    padding-left: 10px;     
}

    If you use SASS, you'll also have to recompile the theme and maybe reload Browser-Cache for the changes to take effect.

    Screenshot of my local working example