Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Are there are any layout tricks I can use to center a window inside a browser page?
The window is set to be 500px wide by 250px height, inside a browser page of variable size.
Here's the ZUL code...
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<borderlayout width="100%" height="100%">
<north height="100px"></north>
<center>
<window title="Welcome to SKAP" border="normal"
width="500px" height="250px"
apply="com.eis.skap.external.action.ExternalActionComposer">
<grid>
<columns>
<column width="140px" />
<column width="*" />
</columns>
<rows>
<row align="center">
<image
src="/images/logo/skap_logo_02_small.jpg" />
<vbox align="center">
<label value="Welcome to SKAP"
style="font: bold" />
<label
value="the organization knowledge centre" />
</vbox>
</row>
<row>
<space />
<space />
</row>
<row>
<label value="User ID" />
<textbox id="loginUserID" cols="20" />
</row>
<row>
<label value="Password" />
<textbox id="loginPassword" cols="20"
type="password" />
</row>
<row>
<space />
<space />
</row>
<row>
<space />
<button id="loginSubmit" label="Submit" />
</row>
</rows>
</grid>
</window>
</center>
</borderlayout>
</zk>
You have to use a combination of overlapped and position-attribute like here:
<window title="Welcome" border="normal" width="500px" height="250px" position="center" mode="overlapped"> Hello World </window>
HTH, Maik
Found the answer...
<vbox height="100%" width="100%" pack="center" align="center"> <div height="100%" width="100%" align="center"> <window title="SKAP login" border="normal" width="500px" height="250px" apply="com.eis.skap.external.action.ExternalActionComposer"> <grid align="left"> <columns> <column width="140px" /> <column width="*" /> </columns> <rows > <row align="center"> <image src="/images/logo/skap_logo_02_small.jpg" /> <vbox align="center"> <label value="Welcome to SKAP" style="font: bold" /> <label value="the organization knowledge centre" /> </vbox> </row> <row> <space /> <space /> </row> <row> <label value="User ID" /> <textbox id="loginUserID" cols="20" /> </row> <row> <label value="Password" /> <textbox id="loginPassword" cols="20" type="password" /> </row> <row> <space /> <space /> </row> <row> <space /> <button id="loginSubmit" label="Submit" /> </row> </rows> </grid> </window> </div> </vbox>
Asked: 2010-06-03 00:24:00 +0800
Seen: 2,531 times
Last updated: Sep 17 '10
