Vertically centre components in top of page header area?

asked 2019-04-10 02:01:07 +0800

davout gravatar image davout
1435 3 18

I'm building a pretty standard web page using a 'borderlayout' that has a 'north' area reserved for the usual mix of things like:

  • App home page icon
  • App logo User info
  • user info
  • System men

I'm trying to get the various components to centre vertically in the vertical space available, but can't this to work

I'm using templates, and the ZUL file shown below is what is injected into the north area

    <borderlayout height="70px" >
        <west border="none" >
               <image src="/image/home-small.png" width="32px" height="32px" />
                <space />
               <image src="/image/logo-1.png" width="131px" height="36px" />
        <center border="none">

        <east border="none"  >
            <hbox align="end" pack="center" hflex="1" vflex="1">
                <label value="User: " />
                <label value="fred"  sclass="label-bold" />
                <space orient="horizontal" width="20px"/>
                <label value="Tenant: " />
                <label value="acme" sclass="label-bold"/>
                <space orient="horizontal" width="50px"/>
                <menubar id="mainMenu" orient="horizontal">
                    <menuitem label="Admin"/>
                    <menuitem label="My account"/>
                    <menuitem label="Support"/>
                    <menu label="Help">
                            <menuitem label="General Help" />
                            <menuitem label="Getting started" />
                            <menuitem label="About us" />
                            <menuitem label="About the product" />
                    <menuitem label="Log out"/>

The 'label' components align vertically at the bottom of the vertical space, even though the hbox component pack attribute has been set to 'center'.

Any suggestions?

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted

answered 2019-04-11 11:49:56 +0800

cor3000 gravatar image cor3000
4466 2 7
ZK Team

use <hbox align="center" pack="end" hflex="1" vflex="1">

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

1 follower



Asked: 2019-04-10 02:01:07 +0800

Seen: 4 times

Last updated: Apr 11

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