How to get the margin between menu items in pyjamas or gwt?

Question

I have implemented a MenuBar using pyjamas as:

from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Composite import Composite
from pyjamas.ui.MenuBar import MenuBar

class Menubar(Composite):
    def __init__(self):
        Composite.__init__(self)

        menubar = MenuBar(vertical=False)
        menubar.addItem("Dashboard", "")
        menubar.addItem("FileInspect", "")

        self.initWidget(menubar)

RootPanel().add(Menubar())

But by all means i have tried, i am unable to get the margin/space between the menuitems "Dashboard" and "FileInspect". Your suggestions are warmly appreciated.

Answer 1

In GWT you can add a MenuItemSeparator between any pair of menu items that you want to separate. The width of the separator determines the separation between items. You can set the style for your separator such that it appears invisible. For example,

private MenuBar myMenuBar=new MenuBar(false); // false for horizontal menu bar
private MenuItemSeparator separator=new MenuItemSeparator();
private MenuItem item1;
private MenuItem item2;

myMenuBar.add(item1);
myMenuBar.add(separator);
myMenuBar.add(item2);

separator.setStyleName("separatorStyle");

In your CSS you define separatorStyle. For example, if you want a 20px separation...

.separatorStyle{
width: 20px;
padding: 0px;
margin: 0px;
border: none;
background: none;
}