1

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.

consumer
  • 709
  • 3
  • 7
  • 19
  • What do you mean by 'get the margin/space'? You mean control the spacing? Or just find out the number? – jambox Apr 13 '11 at 22:44
  • Yes, by that i mean control spacing. If you have any ideas, do share them with me. Thanks – consumer Apr 14 '11 at 15:33

2 Answers2

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;
}
Alicia
  • 144
  • 1
  • 9
1

OK so first look in the api documentation at http://pyjs.org/api/ and look for menubar (Ctrl+F finds it ok) or if you're lazy then you can see it here: http://pyjs.org/api/pyjamas.ui.MenuBar.MenuBar-class.html

That doesn't help in this case because there's no setSpacing() method or similar but at least it tells us that for sure.

So I guess you have to do it via css. Look in the showcase example:

pyjamas/examples/showcase/src/public/Showcase.css

Now you'll see there's a gwt-MenuBar class right at the top. So you've got two choices; either use the addStyleName() method of the MenuBar widget or just edit the existing style in the css. I'd probably do the latter.

Hope that helps!! Don't forget to accept if it does.

jambox
  • 584
  • 4
  • 15
  • I had already tried adding a margin inside .gwt-MenuBar .gwt-MenuItem { margin-right:5px; padding: 1px 4px 1px 4px; font-size: smaller; cursor: default; } But it is not working ... :( – consumer Apr 18 '11 at 04:14