Horizontal Scrollbar in Tabpanel?

schustf1

6 Feb 2012 09:18:53 GMT

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

schustf1

6 Feb 2012 09:19:43 GMT

sorry for the double entry, please delete

ZK - Open Source Ajax Java Framework

Horizontal Scrollbar in Tabpanel?