MenuBar in a child Window

Vaadin 6 / 7 / 8 Framework UI
1

Hi there !

I come up with a new problem… And for this one, I can’t see an easy solution :frowning:

I want to use a MenuBar object in a child Window of my application.
On the Java side, there is no problem, everything is working fine.

On the CSS side…
In order to have the child Window on top, its z-index property is set to something high, 1000 I think.
Trouble is, when the div containing the gwt-menubar menu is added to the DOM, it is not added under the node of the window but under the body node.
Thus, it does not inherit the z-index attribute, and is not rendered on the screen, because it is being the child window.

The solutions I see to solve that one:

  • adding the div node under the node of the child window (may be quite complicated, I think, as it require to find the correct child window each time)
  • after adding the div node under the body node, and setting its other CSS attribute, set it’s z-index to a very high value (but that may cause problem; I’m mainly thinking about a child window moved over a menubar…)

So !
Is there something I do not see ? :wink: Or is it really a bug ?
I’ll try to implement the second solution in a few days if I can’t come up with an easier solution. In my case, it should be an acceptable workaround, but the drawbacks are IMO too importants to let that code go in the main project.

Quentin.

2

Yes, it looks like a bug. Created a ticket:
http://dev.itmill.com/ticket/1961
. Risto may comment on this tomorrow or so.

3

The bug has to do with the z-index attribute, as you said. The problem is that while the main bar is a normal component, the sub-menus are actually overlays. Currently MenuBar does not extend ToolkitOverlay (which it should) so the ordering of multiple overlays is wrong. I’ll fix this asap.

4

Committed a fix to trunk. I ended up rewriting most of the client side functionality , since the gwt-version was so hard to change. MenuBar ‘popups’ are still added under the body node since it is the way the gwt PopupPanel works, but now the z-index is handled correctly as we use ToolkitOverlay.

I tested it, but let us know if there are any other problems.

5

It seems to work fine !
Thank you very much :slight_smile:

I just have to fix my design in order to take into account the modification between the 5.2.4 I was using and the current version, and everything will be perfect :slight_smile:

I’ll let you know if I find any more problem on that one !

Quentin.