0

Horizontal Scrollbar in Tabpanel?

asked 2012-02-06 09:18:45 +0800

schustf1 gravatar image schustf1
129

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

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2012-02-13 09:50:18 +0800

matthewgo gravatar image matthewgo
375

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>

link publish delete flag offensive edit

answered 2012-02-20 15:50:28 +0800

schustf1 gravatar image schustf1
129

Hello matthewgo,

very good, works very well, thanks a lot...

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

RSS

Stats

Asked: 2012-02-06 09:18:45 +0800

Seen: 230 times

Last updated: Feb 20 '12

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