Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I am trying to include a side bar with a little menu. I want the side bar (vbox) to take up the whole left side (height="100%") but I want the menu items (toolbarbuttons) to be vertically aligned at the top of the bar. I have attached some test code here with three versions of the sidebar that shows how setting valign="top" height="100%" behaves.
What happens depends on the browser. In Firefox, the height="100%" vboxes fill up the vertical space. In IE all the vboxes ignore the height attribute. For the case where height is not specified, the items are packed together in either IE or Firefox but then the sidebar is not the full height.
What am I doing wrong?
Is valign="top" not supposed to align everything at the top or is it a bug?
Why doesn't height="100%" work in IE?
I found a work-around (the fourth version in my example) to get the behavior I want in Firefox with nested vboxes, the outer vbox with height="100%" and the inner vbox with height not specified, but I consider this an inelegant option.
<?page title="Test Vertical Align Top" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Test Vertical Align Top" border="normal">
<hbox height="400px">
<hbox height="100%" spacing="10px" style="background:#E0E0E0;">
<vbox height="100%" valign="top" style="background:#E0F0E0;">
<label value="height='100%' valign='top'"/>
<toolbarbutton label="1 home" href="index.html" />
<toolbarbutton label="1 contact us" href="contact.html" />
</vbox>
<vbox height="100%" style="background:#E0F0E0;">
<label value="height='100%'"/>
<toolbarbutton label="2 home" href="index.html" />
<toolbarbutton label="2 contact us" href="contact.html" />
</vbox>
<vbox style="background:#E0F0E0;">
<label value="no height, no valign"/>
<toolbarbutton label="3 home" href="index.html" />
<toolbarbutton label="3 contact us" href="contact.html" />
</vbox>
<vbox height="100%" style="background:#E0F0E0;">
<vbox>
<label value="nested vboxes, no height, no valign"/>
<toolbarbutton label="4 home" href="index.html" />
<toolbarbutton label="4 contact us" href="contact.html" />
<label value="this is what I thought"/>
<label value="height='100%' valign='top'/>
<label value="would look like"/>
</vbox>
</vbox>
</hbox>
</hbox>
</window>
</zk>
Hi,
For the vbox
<vbox height="100%" valign="top" style="background:#E0F0E0;">
Alignment got wrong because vbox will distribute the same height to its children components if its height is defined. So, for the last vbox, although you thought it's not a good solution, for specification of vbox that is an appropriate way to your purpose.
For the browser issue of the vbox
<vbox height="100%" style="background:#E0F0E0;">
I think that's because IE has its way to deal with vbox and hbox, no matter what attribute you set. In my test the height of hbox is much shorter than one in Firefox.
Thanks.
hideokidd: "Alignment got wrong because vbox will distribute the same height to its children components if its height is defined. So, for the last vbox, although you thought it's not a good solution, for specification of vbox that is an appropriate way to your purpose."
Thank you for explaining it. It helps a lot just to understand why it is happening even if I don't like it. :-)
Asked: 2009-03-03 16:22:15 +0800
Seen: 2,799 times
Last updated: Mar 04 '09
