-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hello all,
In a window with a tabbox, tabpanels and listboxes the vertical scrollbar appears (automatically, in the tabpanel-area, with style="overflow:auto"), but I cannot figure out how to create a horizontal scrollbar. (I tried different combinations of overflow: and vflex/hflex).
The following example shows the problem in the ZK sandbox (when resizing the browser window): there is no way to scroll to the right listboxes.
<?page id="p" ?> <zk xmlns="http://www.zkoss.org/2005/zul"> <window id="pageWin" height="100%" border="normal" vflex="1"> <tabbox id="mainTabbox" vflex="1"> <tabs id="mainTabs"> <tab id="mainTab" label="1" style="font-weight:bold; font-size:125%;" /> <tab id="infoTab" label="2" style="font-weight:bold; font-size:125%;" /> </tabs> <tabpanels> <tabpanel id="mainTabpanel" style="overflow:auto"> <groupbox id="inputGBox" mold="3d" width="100%"> <caption label="a" /> <grid id="inSlotsGrid" fixedLayout="true" sclass="ColibriGridRowHeight"> <columns sizable="false"> <column width="100%" /> </columns> <rows> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb1" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb1" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb2" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb2" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb3" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb3" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> </rows> </grid> </groupbox> <div height="5px"></div> </tabpanel> <tabpanel id="infoTabpanel" vflex="1" style="overflow:auto"> <groupbox id="descGBox" mold="3d" width="100%"> <caption label="b" /> </groupbox> </tabpanel> </tabpanels> </tabbox> </window> </zk>
Versions: IE 8, ZK 5.0.9 EE
Thanks, FS
Hi schustf1,
Please try the following code:
<?page id="p" ?> <zk xmlns="http://www.zkoss.org/2005/zul"> <window id="pageWin" height="100%" border="normal" vflex="1"> <tabbox id="mainTabbox" vflex="1"> <tabs id="mainTabs"> <tab id="mainTab" label="1" style="font-weight:bold; font-size:125%;" /> <tab id="infoTab" label="2" style="font-weight:bold; font-size:125%;" /> </tabs> <tabpanels> <tabpanel id="mainTabpanel" style="overflow:auto"> <hbox width="100%"> <cell hflex="1"> <groupbox id="inputGBox" mold="3d" width="100%"> <caption label="a" /> <grid id="inSlotsGrid" fixedLayout="true" sclass="ColibriGridRowHeight"> <columns sizable="false"> <column width="100%" /> </columns> <rows> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb1" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb1" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb2" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb2" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> <row> <hlayout height="300px" style="padding:10px"> <listbox id="candidateLb3" vflex="true" width="380px" multiple="true" rows="8" /> <listbox id="chosenLb3" vflex="true" width="380px" multiple="true" rows="8" /> </hlayout> </row> </rows> </grid> </groupbox> </cell> </hbox> <div height="5px"></div> </tabpanel> <tabpanel id="infoTabpanel" vflex="1" style="overflow:auto"> <groupbox id="descGBox" mold="3d" width="100%"> <caption label="b" /> </groupbox> </tabpanel> </tabpanels> </tabbox> </window> </zk>
Asked: 2012-02-06 09:18:45 +0800
Seen: 230 times
Last updated: Feb 20 '12