In Java, the BorderLayout expands its children to fill the container it is in. How do I do that here?
I want to have a .zul file that looks something like this (simplified) fill the browser window completely when it loads and continue to fill it as it's resized:
Tags
People
Badges
Help
<zk>
<borderlayout>
<north sclass="header">
<label value="this is the header" />
</north>
<center sclass="content">
<label value="Center stuff goes here" />
</center>
<south sclass="footer">
<label value="this is the footer" />
</south>
</borderlayout>
</zk>
It really ought to be as simple as setting vflex="1" for the borderlayout component (or perhaps the center one), but that doesn't work. (I'm using 8.5.2)
I pasted your code into zkfiddle and from my side it looks like it does exactly what you describe. Even if you run it directly in separate browser tab with a direct link http://temp.zkfiddle.org:1223/t8521icb/fjgu0c/2/
Does it behave differently on your side? Are you using any custom JS or CSS that might affect the result?
EDIT: I meant to say your example given stretches over the whole available browser area. Just follow the links provided above and you'll see that your example already works as you'd expect.
I am not sure that I understand your comment. Are you saying that when you use zkfiddle (which I know nothing about) it behaves as I say it does (does not fill the browser window) or that it behaves as I say it should (does fill the browser window)?
What it does on my system is not fill the browser window. Specifically, it renders as it if has a height of "0px". No content shows at all, just a horizontal line 8 to 12 px high (that I presume is the borders because it is in the border color).
The online documentation (https://www.zkoss.org/wiki/ZK%20Component%20Reference/Layouts/Borderlayout) says that you have to set the height when you put a Borderlayout into a container. That is absolutely NOT what you should have to do, at least not if their Borderlayout is meant to behave like the one in Java Swing (and other similar development environments).
The documentation also says "The default height of Borderlayout is dependent on its parent component, therefore, users can also put Borderlayout in a container with a fixed height." - The problem with that is that you should NOT HAVE TO give the container a fixed height. You SHOULD be able to have the container (or the Borderlayout itself) expand (vflex="1") to fill it's parent (the browser window in this case).
I do not have any JS or CSS that might affect the result. I have tried to use CSS to "fix" it, but you can't use percents in heights without creating others overflow problems (because their size calculations don't take padding or something into account). That is why I am asking here.
I just need the Borderlayout (or some container that it's in) to fill the browser window (and resize as things change). Certainly someone else has wanted to do the same thing. That's one of the main uses of a Borderlayout: To organize the main screen.
zkfiddle is useful to exchange instantly runnable and testable zul/java/js/css code. If you click the link I provided previously you'll find your code. Click the "run" button at the top and it will run. Please add what's missing to indicate your problem. Then I can check what's wrong.
cor3000 ( 2018-09-28 11:12:11 +0800 )editI agree: different frameworks behave differently. The documentation matches your observations. So, if you want to put <borderlayout> inside a flexible container simply make the container flexible.
<zk>
<div vflex="1">
<borderlayout>
<north sclass="header">
<label value="this is the header" />
</north>
<center sclass="content">
<label value="Center stuff goes here" />
</center>
<south sclass="footer">
<label value="this is the footer" />
</south>
</borderlayout>
</div>
</zk>
here a runnable example: http://zkfiddle.org/sample/fjgu0c/3-filling-borderlayout-inside-flexible-container
Please try it out yourself.
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):
<?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>
Asked: 2018-09-24 08:02:32 +0800
Seen: 34 times
Last updated: Sep 28 '18