0

how do I get borderlayout to fill its container?

asked 2018-09-24 08:02:32 +0800

BrotherRichard gravatar image BrotherRichard
10 1

updated 2018-09-25 19:08:44 +0800

cor3000 gravatar image cor3000
4293 1 7
ZK Team

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:

<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)

delete flag offensive retag edit

4 Answers

Sort by ┬╗ oldest newest most voted
0

answered 2018-09-26 10:35:20 +0800

cor3000 gravatar image cor3000
4293 1 7
ZK Team

updated 2018-09-28 12:53:33 +0800

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.

link publish delete flag offensive edit
0

answered 2018-09-28 01:18:32 +0800

BrotherRichard gravatar image BrotherRichard
10 1

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.

link publish delete flag offensive edit

Comments

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 )edit
0

answered 2018-09-28 13:03:24 +0800

cor3000 gravatar image cor3000
4293 1 7
ZK Team

I 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.

link publish delete flag offensive edit
0

answered 2018-09-28 15:31:09 +0800

BrotherRichard gravatar image BrotherRichard
10 1

updated 2018-09-28 15:49:07 +0800

cor3000 gravatar image cor3000
4293 1 7
ZK Team

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>
link publish delete flag offensive edit

Comments

I am glad to hear my information was helpful.

cor3000 ( 2018-09-28 18:30:06 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2018-09-24 08:02:32 +0800

Seen: 14 times

Last updated: Sep 28

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More