I am having a simple problem w/ hbox. given the window below can someone tell me how to get the OK/Cancel buttons to align at/near bottom edge of window (other than adding spacing). Currently, they are drawn beneath the bottom of the grid. Thanks so much for any help.
Tags
People
Badges
Help
<zk>
<window id="editWin" mode="overlapped" width="300px" sizable="true" border="normal"
height="500px" title="Edit ${param.pageId }"
closable="true" onClose="self.visible=false; event.stopPropagation();" visible="true" position="center,right">
<borderlayout width="100%" height="100%">
<north title="Title" collapsible="true" height="33%">
<textbox id="titleBox" rows="15" width="100%"></textbox>
</north>
<center title="Code" flex="true">
<textbox id="codeBox" rows="15" width="100%"></textbox>
</center>
<south height="33%" border="1px">
<vbox width="100%" height="100%" align="center" pack="center" style="border: 1px solid green">
<grid oddRowSclass="none">
<columns>
<column hflex="2"/>
<column hflex="3"/>
<column hflex="2"/>
</columns>
<rows>
<row>
<cell align="center" rowspan="2"><button id="calcBtn" label="Calc"></button></cell>
<cell align="center"><label id="unitLbl" value="(000)"></label></cell>
<cell align="center"><label id="respSymbolLbl" value="#"></label></cell>
</row>
<row>
<cell align="center"><label id="audLbl" value="99000"></label></cell>
<cell align="center"><label id="respLbl" value="99"></label></cell>
</row>
</rows>
</grid>
<vbox height="100%" width="100%" align="end">
<hbox height="100%" width="100%" spacing="10px" pack="end" style="border: 1px solid blue">
<button id="okBtn" label="OK"/>
<button id="cancelBtn" label="Cancel"></button>
</hbox>
</vbox>
</vbox>
</south>
</borderlayout>
</window>
</zk>
Like this?
<zk>
<window id="editWin" mode="overlapped" width="300px" sizable="true" border="normal"
height="500px" title="Edit ${param.pageId }"
closable="true" onClose="self.visible=false; event.stopPropagation();" visible="true" position="center,right">
<borderlayout width="100%" height="100%">
<north title="Title" collapsible="true" height="33%">
<textbox id="titleBox" rows="15" width="100%"></textbox>
</north>
<center title="Code" flex="true">
<textbox id="codeBox" rows="15" width="100%"></textbox>
</center>
<south height="33%" border="1px">
<vbox vflex="1" style="border: 1px solid green">
<grid oddRowSclass="none">
<columns>
<column hflex="2"/>
<column hflex="3"/>
<column hflex="2"/>
</columns>
<rows>
<row>
<cell align="center" rowspan="2"><button id="calcBtn" label="Calc"></button></cell>
<cell align="center"><label id="unitLbl" value="(000)"></label></cell>
<cell align="center"><label id="respSymbolLbl" value="#"></label></cell>
</row>
<row>
<cell align="center"><label id="audLbl" value="99000"></label></cell>
<cell align="center"><label id="respLbl" value="99"></label></cell>
</row>
</rows>
</grid>
<vbox vflex="1" hflex="1" pack="end" align="end">
<hbox spacing="10px" style="border: 1px solid blue" >
<button id="okBtn" label="OK"/>
<button id="cancelBtn" label="Cancel"></button>
</hbox>
</vbox>
</vbox>
</south>
</borderlayout>
</window>
</zk>
To make it easy to test I created a fiddle.
If you don't know fiddle : click the link and push on run. Your example code will be runned at that site.
Also congratz to post code what you could directly use in zk fiddle.
Like that we can test in fiddle a lot easier then that we have to remove all links to your composer/vm.
Now here is some more info about hflex/vflex and vbox/hbox.
Greetz chill.
thanks for answering (again!) and the vote. that's perfect. It's frustrating that I spent a half day looking through anything I could find about box layout and didn't see any link to hflex/vflex.
robertkaren ( 2014-04-03 15:25:17 +0800 )editAsked: 2014-04-02 20:11:05 +0800
Seen: 24 times
Last updated: Apr 03 '14
+1 for the nice code block, directly to use in fiddle.
chillworld ( 2014-04-03 06:39:57 +0800 )edit