 | 1 | initial version | |
Thank so much! With the benefit of your help, I was able to get it working.
There can only be one component outside the borderlayout. I had a div, then a vbox, then the borderlayout. I also had added a style="" to the directive. That created another outside container. When I removed the style element from page and used only one container, it worked exactly as I wanted it to. The one container needed to be a div. A vbox or vlayout did not work. And, as you showed above, it needed to have a vflex="1" attribute. Here is what I ended up with (with all proprietary information removed and some style factoring yet to be done):
<zk>
Tags
People
Badges
Help
<navmenu id="navmenu" menuClass="" visible='false'
viewModel="@id('nvm') @init('')" />
<include id="usermenu" src="/widgets/menu/userMenu.zul" />
<borderlayout sclass="mainBorder" >
<north sclass="mainHeader" splittable="false" >
<hbox hflex="1" vflex="0" align="center" pack="center">
<toolbarbutton id="" sclass="mainButton" src="" onClick="@command('showNavMenu')"/>
<div hflex="1" sclass="mainHeaderCenter">
<div sclass="mainHeaderCenterIcon" onClick="@command('goHome')">
<image sclass="mainIcon" src="" />
</div>
</div>
<toolbarbutton id="userMenuButton" sclass="" imageContent="@load()" onClick="@command('showUserMenu')" />
</hbox>
</north>
<center sclass="mainCenter" vflex="1" autoscroll="true">
<vbox hflex="1" vflex="1" pack="top" align="center" sclass="mainCenterContent" >
<label value="@load()" style="font-style: bold; font-size: 16pt"/>
<label value="@load()" style="font-size: 12pt" />
<include id="content" mode="instant" src="@load()" />
</vbox>
</center>
<south sclass="mainFooter" splittable="false" >
<hbox hflex="1" vflex="0" align="center" pack="center">
<label value="@load(avm.status)" sclass="@load(avm.statusClass)" />
</hbox>
</south>
</borderlayout>
| | 2 | No.2 Revision |
Thank so much! With the benefit of your help, I was able to get it working.
There can only be one component outside the borderlayout. I had a div, then a vbox, then the borderlayout. I also had added a style="" to the directive. That created another outside container. When I removed the style element from page and used only one container, it worked exactly as I wanted it to. The one container needed to be a div. A vbox or vlayout did not work. And, as you showed above, it needed to have a vflex="1" attribute. Here is what I ended up with (with all proprietary information removed and some style factoring yet to be done):
<zk>
<?link rel="stylesheet" type="text/css" href="/style/common.css"?>
<?page title="" ?>
<?component name="navmenu" class="" ?>
<zk>
<div id="application" sclass="main"
viewModel="@id('avm') @init('')"
apply="org.zkoss.bind.BindComposer"
hflex="1" vflex="1"
style="border: 4px solid red"
validationMessages="@id('vmsgs')" >
<navmenu id="navmenu" menuClass="" visible='false'
viewModel="@id('nvm') @init('')" />
<include id="usermenu" src="/widgets/menu/userMenu.zul" />
<borderlayout sclass="mainBorder" >
<north sclass="mainHeader" splittable="false" >
<hbox hflex="1" vflex="0" align="center" pack="center">
<toolbarbutton id="" sclass="mainButton" src="" onClick="@command('showNavMenu')"/>
<div hflex="1" sclass="mainHeaderCenter">
<div sclass="mainHeaderCenterIcon" onClick="@command('goHome')">
<image sclass="mainIcon" src="" />
</div>
</div>
<toolbarbutton id="userMenuButton" sclass="" imageContent="@load()" onClick="@command('showUserMenu')" />
</hbox>
</north>
<center sclass="mainCenter" vflex="1" autoscroll="true">
<vbox hflex="1" vflex="1" pack="top" align="center" sclass="mainCenterContent" >
<label value="@load()" style="font-style: bold; font-size: 16pt"/>
<label value="@load()" style="font-size: 12pt" />
<include id="content" mode="instant" src="@load()" />
</vbox>
</center>
<south sclass="mainFooter" splittable="false" >
<hbox hflex="1" vflex="0" align="center" pack="center">
<label value="@load(avm.status)" sclass="@load(avm.statusClass)" />
</hbox>
</south>
</borderlayout>
</div>
</zk>