I’m having a problem with the collapsed items sub-menu on the MenuBar component. First, let me explain that I am trying to create a simple application-style page with a MenuBar that runs horizontally along the top of the window and all other content goes below it. The menu needs to run the full width of the window. My problem is that whenever I click to expand the list of collapsed menu items, the sub-menu will initially draw itself so that it flows past the edge of the browser window, causing a momentary flash of scrollbars to appear and then causing the sub-menu to close itself automatically.
(See the attached menu1.png for a screenshot of the intermediate flash of scrollbars before the sub-menu closes.
I resorted to writing the simplest of test apps to try to figure this out. I feel like this might be because I’m misunderstanding something about the proper way to do layouts. Anyway, here are snippets from a simple test app I wrote.
// this goes in init()
final Window mainWindow = new Window("Collapsed Menu Test App");
setMainWindow(mainWindow);
VerticalLayout vLayout = new VerticalLayout();
vLayout.setSizeFull();
final Component menubar = getMenuBarComponent(15, 8);
vLayout.addComponent(menubar);
mainWindow.setContent(vLayout);
// ...........
and this is the method I used to generate a big menu for testing…
private Component getMenuBarComponent(final int numberOfMenuItems, final int itemsPerMenu) {
MenuBar menubar = new MenuBar();
for (int i = 0; i < numberOfMenuItems; i++) {
MenuItem menuItem = menubar.addItem("Menu Item " + (i+1), null);
for (int j = 0; j < itemsPerMenu; j++) {
menuItem.addItem("Menu Item " + (j+1), null);
}
}
// In order to collapse items, the MenuBar must have a specified width
// see - http://demo.vaadin.com/sampler#MenuBarCollapsing
menubar.setWidth("100%");
return menubar;
}
I noticed that if I remove vLayout.setSizeFull(), then I don’t see the vertical scrollbar appear, but the sub-menu still automatically collapses seemingly due to the fact that it renders itself past the window’s edge.
One thing that I tried which was slightly successful was to set the menubar’s width to 95% instead of 100%. This gave the sub-menu enough room to draw itself without being clipped, which fixed the problem of it automatically closing itself. However, this causes another issue in which the 2nd level sub-menu draws itself (mostly) on top of the sub-menu. After you manage to do a mouse-over at least one time on all of the collapsed menu items, then from that point forward the 2nd-level sub-menus draw themselves nicely, without obtrusively overlapping the collapsed menu items.
(See the attached screenshots menu2.png and menu3.png to see what I mean. menu3 shows how the same sub-menu renders correctly after I’ve moused over at least once.)
So, is there a way I can avoid these rendering issues with the collapsed menu items? Is there a css fix or should I do my layout differently? I really want to keep the main window’s vertical layout as setSizeFull() since it’s an application-style page and I also would prefer to keep the menubar at 100% since it starts to look weird if you cut it shorter. Any advice?
