ZK: Menubar with Buttons

Question

I got a ZUL Page, which is aligned by a "borderlayout". In "north" I got a Menubar, which is aligned left.

Now I want 2x Buttons and 2x Labels in "north", on the opposite direction of the Menubar (right).

I tried:

        <north border="none">
        <hbox width="100%">
            <menubar id="menubar" width="380px">
                <menu label="A">
                    <menupopup>
                        <menuitem label="A1"/>
                    </menupopup>
                </menu>
                ....                    
            </menubar>
            <hbox vflex="1" hflex="1" align="center">
                <div hflex="1"></div>
                <label id="B"/>
                <button id="C" label="C" />
                <button id="D" label="D" />
                <label id="E"/>
            </hbox>
        </hbox>
    </north>

which looks fine, but when I set a value for label "b" or "e", the design gets broken.

h**p://i.imgur.com/HnRnxmj.png

The top part in the image is the right looking one, while the bottom one is screwed up. Any Idea how to fix this? The buttons are "fixed width" while both labels can "grow".

Thanks

Answer 1

Your spacer <div> is eating up all the space. Remove this and then set pack of the <hbox> to end.

This gives you something like that:

...                    
  </menubar>
  <hbox vflex="1" hflex="1" align="center" pack="end">
    <label id="B"/>
...

As a general note I find it quite helpful to use Firefox/Firebug for debugging those layout issues. So one can easily see which resulting DOM is generated by the ZUL code.