Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello All,
I am trying to use the following code to create a horizontal box with a menu on the left and a login button at the far right. Initially it looks fine, but when the window is made smaller, the button disappears. If the window is made bigger, it also works as expected.
I have tried many combinations of hflex and width, with no luck.
I am currently using 5.0.1, but the result is the same in the live demo (currently 5.0.2).
Thanks in advance for any help you can offer.
Marie
<window title="hflex/vflex" width="80%" height="80%" sizable="true" border="normal">
<vbox hflex="1">
<hbox hflex="1">
<hbox hflex="1" width="100%" pack="start">
<menubar>
<menu label="File"></menu>
<menu label="View"></menu>
<menu label="Help"></menu>
</menubar>
</hbox>
<hbox hflex="1" width="100%" pack="end">
<button id="logout" label="Logout"/>
</hbox>
</hbox>
</vbox>
</window>Not exact the components which you have, but it solves the same problem with showing i.e.buttons in START/CENTER/END area horizontally.
<window border="none" width="600px">
<style>
body { padding: 0 0; /* 0 padding on top and bottom and 0
padding on right and left */ }
<!-- remove white strips between the toolbars -->
.hboxRemoveWhiteStrips td.z-hbox-sep {width: 0; padding:0;}
</style>
<div sclass="z-toolbar" style="padding:0">
<hbox pack="stretch" sclass="hboxRemoveWhiteStrips"
width="100%">
<toolbar align="start" style="float:left">
<button id="btnHelp"
image="/images/icons/light_16x16.gif"
tooltiptext="${c:l('btnHelp.tooltiptext')}" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
<separator orient="vertical" />
</toolbar>
<toolbar align="center" style="float:left">
<button id="btn_CustomerAddressSearchDialog"
image="/images/icons/btn_search2_16x16.gif"
tooltiptext="${c:l('btnSearch.tooltiptext')}" />
<button id="btnPrint"
image="/images/icons/btn_print2_16x16.gif"
tooltiptext="${c:l('btnPrint.tooltiptext')}" />
</toolbar>
<toolbar align="end" style="float:right">
<button id="btnNew" height="20" label="New" />
<button id="btnEdit" height="20" label="Edit" />
<button id="btnDelete" height="20" label="Delete" />
<button id="btnSave" height="20" label="Save" />
<button id="btnCancel" height="20" label="Cancel" />
</toolbar>
</hbox>
</div>
</window>
best
Stephan
Thanks for the tip, Stephan - I appreciate the quick and helpful response. I did get it to work by using a combination of pack, width, hflex, and style attributes. In case anyone is interested, this is the working zul:
<window title="hflex/vflex" width="80%" height="80%" sizable="true" border="normal">
<hbox pack="stretch" width="100%" hflex="1">
<hbox pack="start" style="float:left">
<menubar>
<menu label="File"></menu>
<menu label="View"></menu>
<menu label="Help"></menu>
</menubar>
</hbox>
<hbox pack="end" style="float:right" hflex="1">
<button id="logout" label="Logout"/>
</hbox>
</hbox>
</window>Asked: 2010-05-17 12:34:27 +0800
Seen: 617 times
Last updated: May 17 '10