0

How to get listbox to show a vertical scroll bar

asked 2009-11-22 19:26:04 +0800

chrisj gravatar image chrisj
30 1 1 1

Hi Folks.

I have a listbox that is populated with items using a GenericAutoWireComposer. I need this to show a vertical scroll bar when it has more rows than the size of the box. The listbox is a "shopping basket", and the user adds items to the list by selecting them in the application.

I have tried many options in the .zul screen, but can not make the scroll bar appear. I can scroll up and down the list using the cursor arrow keys, but I would prefer to have a scroll bar.

I have tried overflow:scroll and overflow:auto, but neither of these worked.

Can anyone tell me how to make this work please?

Here is the code in use.

<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>

<zk xmlns="http://www.zkoss.org/2005/zul">
<window id="shoppingbasket" contentStyle="overflow:auto" apply="au.gov.sa.environment.mappf.web.controller.ShoppingBasketController" width="75%" height="400px" border="normal" title="${c:l('mappf.shoppingbasket.title')}" closable="false" mode="modal" sizable="false">
<borderlayout>
<center>
<listbox id="shoppingBasketDetails" style="overflow:auto" rows="3" forward="onSelect=shoppingbasket.onRowSelected()" width="95%">
<listhead sizable="true">
<listheader label="Description" align="center"/>
<listheader label="Qty" align="center"/>
<listheader label="Availability" align="center"/>
<listheader label="Price" align="center"/>
<listheader label="Media" align="center"/>
<listheader label="Total" align="center" />
</listhead>
</listbox>
</center>
<south>
<div align="right">
<checkbox id="pickupCheckbox" label="Pick Up" forward="onCheck=shoppingbasket.onPickupChecked()"/>
<button id="removeButton" label="${c:l('mappf.shoppingbasket.remove.label')}" height="30" forward="onClick=shoppingbasket.onRemoveItem()" disabled = "true"></button>
<button id="continueButton" label="${c:l('mappf.shoppingbasket.continue.label')}" height="30" forward="onClick=shoppingbasket.onContinueShopping()"></button>
<button id="checkoutButton" label="${c:l('mappf.shoppingbasket.checkout.label')}" image="/images/cart02_24x24.jpg" height="30" forward="onClick=shoppingbasket.onCheckout()" disabled="true"></button>
<button id="updateButton" label="${c:l('mappf.shoppingbasket.updatebutton.label')}" height="30" forward="onClick=shoppingbasket.onUpdate()" disabled="true"></button>
</div>
</south>
</borderlayout>
</window>
</zk>

delete flag offensive retag edit

11 Replies

Sort by » oldest newest

answered 2009-11-22 23:21:09 +0800

chrisj gravatar image chrisj
30 1 1 1

More information:

This problem happens in Internet Explorer 7, Firefox 3.5 and Google Chrome.

link publish delete flag offensive edit

answered 2009-11-22 23:22:58 +0800

fusion35 gravatar image fusion35
237 2 5

Hi :

did you try <center flex="true">?

regards

Devinder

link publish delete flag offensive edit

answered 2009-11-22 23:52:01 +0800

chrisj gravatar image chrisj
30 1 1 1

fusion35 wrote "did you try <center flex="true">?"

Thank you for the suggestion. I have tried it a few minutes ago, but still no scroll bar.


I have also tried <center autoscroll="true"> but this did not work either (It puts the scrollbar on the center frame, instead of on the listbox.)

link publish delete flag offensive edit

answered 2009-11-23 00:42:44 +0800

PeterKuo gravatar image PeterKuo
481 2

I started a wiki page, I would try to complete it as I can.
http://docs.zkoss.org/wiki/Scrollbar-issues

link publish delete flag offensive edit

answered 2009-11-23 07:34:31 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2009-11-23 07:35:34 +0800

@chrisj

put a borderlayout around the listbox.

		<borderlayout id="borderLayout_branchList">

			<north border="none" height="26px">
				<paging id="paging_BranchList" pageSize="20" />
			</north>

			<center border="normal">

				<listbox id="listBoxBranch" vflex="true"
					tooltiptext="${c:l('listbox.tooltiptext')}" width="99.5%"
					height="100%" multiple="false">
					<listhead sizable="true">
						<listheader id="listheader_Branch_Description"
							image="/images/icons/sequence.gif"
							label="${c:l('listheader_Branch_Description.label')}" sort="auto"
							width="50%" />
						<listheader id="listheader_Branch_No"
							image="/images/icons/builder.gif"
							label="${c:l('listheader_Branch_No.label')}" sort="auto"
							width="50%" />
					</listhead>
				</listbox>

			</center>

			<south border="none">
				<separator />
			</south>

		</borderlayout>

best
Stephan

link publish delete flag offensive edit

answered 2009-11-23 18:19:41 +0800

chrisj gravatar image chrisj
30 1 1 1

Hi Stephan

Thank you for your reply. I have tried using a border layout as you suggest. The list box still has no scroll bar. I can scroll the list with the cursor keys, but scroll bar does not appear.

With or without paging in the north layout, it makes no difference. Scroll bar does not show.

Here below is my code with border layout. It does not work. Have I done something wrong?

best regards,
Chris

<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>

<zk xmlns="http://www.zkoss.org/2005/zul">
<window id="shoppingbasket" contentStyle="overflow:auto" apply="au.gov.sa.environment.mappf.web.controller.ShoppingBasketController" width="75%" height="200px" border="normal" title="${c:l('mappf.shoppingbasket.title')}" closable="false" mode="modal" sizable="false">
<borderlayout>
<center>
<borderlayout id="borderLayout_shoppingBasketDetails">
<north border="none" height="26px">
<paging id="paging_shoppingBasketDetails" pageSize="4" />

</north>
<center border="normal">
<listbox id="shoppingBasketDetails" style="overflow:auto"
forward="onSelect=shoppingbasket.onRowSelected()" width="95%"
vflex="true" height="100%" multiple="false">
<listhead sizable="true">
<listheader label="Description" align="center"/>
<listheader label="Qty" align="center"/>
<listheader label="Availability" align="center"/>
<listheader label="Price" align="center"/>
<listheader label="Media" align="center"/>
<listheader label="Total" align="center" />
</listhead>
</listbox>
</center>
<south border="none">
<separator />
</south>
</borderlayout>
</center>
<south>
<div align="right">
<checkbox id="pickupCheckbox" label="Pick Up" forward="onCheck=shoppingbasket.onPickupChecked()"/>
<button id="removeButton" label="${c:l('mappf.shoppingbasket.remove.label')}" height="30" forward="onClick=shoppingbasket.onRemoveItem()" disabled = "true"></button>
<button id="continueButton" label="${c:l('mappf.shoppingbasket.continue.label')}" height="30" forward="onClick=shoppingbasket.onContinueShopping()"></button>
<button id="checkoutButton" label="${c:l('mappf.shoppingbasket.checkout.label')}" image="/images/cart02_24x24.jpg" height="30" forward="onClick=shoppingbasket.onCheckout()" disabled="true"></button>
<button id="updateButton" label="${c:l('mappf.shoppingbasket.updatebutton.label')}" height="30" forward="onClick=shoppingbasket.onUpdate()" disabled="true"></button>
</div>
</south>
</borderlayout>
</window>
</zk>

link publish delete flag offensive edit

answered 2009-11-24 04:15:33 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2009-11-24 04:29:18 +0800

Ah sorry. Here is tested code:

<?page id="indexPage" title="Testseite" cacheable="false" 
	language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>


<zk>

	<borderlayout height="380px">
		<north title="North" maxsize="300" size="50%" splittable="true"
			collapsible="true">
			North part
		</north>
		<center border="0">
			<listbox vflex="true">
				<listhead sizable="true">
					<listheader label="listheader" />
				</listhead>
				<listitem label="item1" />
				<listitem label="item2" />
				<listitem label="item3" />
				<listitem label="item4" />
				<listitem label="item5" />
				<listitem label="item6" />
				<listitem label="item7" />
				<listitem label="item8" />
				<listitem label="item9" />
				<listitem label="item10" />
				<listitem label="item11" />
				<listitem label="item12" />
				<listitem label="item13" />
				<listitem label="item14" />
				<listitem label="item15" />
				<listitem label="item16" />
				<listitem label="item17" />
				<listitem label="item18" />
				<listitem label="item19" />
				<listitem label="item20" />
				<listitem label="item21" />
				<listitem label="item22" />
				<listitem label="item23" />
				<listitem label="item24" />
				<listitem label="item25" />
				<listitem label="item26" />
				<listitem label="item27" />
				<listitem label="item28" />
				<listitem label="item29" />
				<listitem label="item30" />
			</listbox>
		</center>
	</borderlayout>





	<div style="overflow:auto">
		<window style="overflow-y:auto;">
			<borderlayout height="500px">
				<north>
					<tabbox mold="accordion" height="330px">
						<tabs>
							<tab label="Menu 1" />
							<tab label="Menu 2" />
							<tab label="Menu 3" />
						</tabs>
						<tabpanels>
							<tabpanel>
								<menubar orient="vertical">
									<menuitem label="Menuitem 1" />
									<menuitem label="Menuitem 2" />
								</menubar>
							</tabpanel>
							<tabpanel>
								<menubar orient="vertical">
									<menuitem label="Menuitem 1" />
									<menuitem label="Menuitem 2" />
									<menuitem label="Menuitem 3" />
								</menubar>
							</tabpanel>
							<tabpanel>
								<menubar orient="vertical">
									<menuitem label="Menuitem 1" />
									<menuitem label="Menuitem 2" />
								</menubar>
							</tabpanel>
						</tabpanels>
					</tabbox>
				</north>
				<south size="20%">
					<window height="30px">
						<grid>
							<columns>
								<column />
								<column />
							</columns>
							<rows>
								<row>
									<label value="Name:" />
									<textbox />
								</row>
								<row>
									<label value="Surname:" />
									<textbox />
								</row>
							</rows>
						</grid>
					</window>
				</south>
			</borderlayout>
		</window>
	</div>
</zk>


best
Stephan

PS: Seems your code works correct under my zk 3.6.3 version
Tested under Google Chrom 3.x and IE 8

<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>

<zk xmlns="http://www.zkoss.org/2005/zul">
	<window id="shoppingbasket" apply="au.gov.sa.environment.mappf.web.controller.ShoppingBasketController"
                contentStyle="overflow:auto" width="75%"
		height="200px" border="normal"
		title="${c:l('mappf.shoppingbasket.title')}" closable="false"
		mode="modal" sizable="false">
		<borderlayout>
			<center>
				<borderlayout id="borderLayout_shoppingBasketDetails">
					<north border="none" height="26px">
						<paging id="paging_shoppingBasketDetails"
							pageSize="4" />

					</north>
					<center border="normal">
						<listbox id="shoppingBasketDetails"
							style="overflow:auto"
							forward="onSelect=shoppingbasket.onRowSelected()" width="95%"
							vflex="true" height="100%" multiple="false">
							<listhead sizable="true">
								<listheader label="Description"
									align="center" />
								<listheader label="Qty" align="center" />
								<listheader label="Availability"
									align="center" />
								<listheader label="Price"
									align="center" />
								<listheader label="Media"
									align="center" />
								<listheader label="Total"
									align="center" />
							</listhead>
							<listitem label="item1" />
							<listitem label="item2" />
							<listitem label="item3" />
							<listitem label="item4" />
							<listitem label="item5" />
							<listitem label="item6" />
							<listitem label="item7" />
							<listitem label="item8" />
							<listitem label="item9" />
							<listitem label="item10" />
							<listitem label="item11" />
							<listitem label="item12" />
							<listitem label="item13" />
							<listitem label="item14" />
							<listitem label="item15" />
							<listitem label="item16" />
							<listitem label="item17" />
							<listitem label="item18" />
							<listitem label="item19" />
							<listitem label="item20" />
							<listitem label="item21" />
							<listitem label="item22" />
							<listitem label="item23" />
							<listitem label="item24" />
							<listitem label="item25" />
							<listitem label="item26" />
							<listitem label="item27" />
							<listitem label="item28" />
							<listitem label="item29" />
							<listitem label="item30" />
						</listbox>
					</center>
					<south border="none">
						<separator />
					</south>
				</borderlayout>
			</center>
			<south>
				<div align="right">
					<checkbox id="pickupCheckbox" label="Pick Up"
						forward="onCheck=shoppingbasket.onPickupChecked()" />
					<button id="removeButton"
						label="${c:l('mappf.shoppingbasket.remove.label')}" height="30"
						forward="onClick=shoppingbasket.onRemoveItem()" disabled="true">
					</button>
					<button id="continueButton"
						label="${c:l('mappf.shoppingbasket.continue.label')}" height="30"
						forward="onClick=shoppingbasket.onContinueShopping()">
					</button>
					<button id="checkoutButton"
						label="${c:l('mappf.shoppingbasket.checkout.label')}"
						image="/images/cart02_24x24.jpg" height="30"
						forward="onClick=shoppingbasket.onCheckout()" disabled="true">
					</button>
					<button id="updateButton"
						label="${c:l('mappf.shoppingbasket.updatebutton.label')}"
						height="30" forward="onClick=shoppingbasket.onUpdate()"
						disabled="true">
					</button>
				</div>
			</south>
		</borderlayout>
	</window>
</zk>

link publish delete flag offensive edit

answered 2009-11-25 18:16:16 +0800

chrisj gravatar image chrisj
30 1 1 1

>terrytornado wrote:
>PS: Seems your code works correct under my zk 3.6.3 version
>

Hi Stephan.

This is the answer! I was developing the application using ZK 3.6.2. I have upgraded it to 3.6.3 today and the problem is fixed. My scroll bar works correctly now.

Many thanks for your help and support.

For your information, here is the final working version of the code.

<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>

<zk xmlns="http://www.zkoss.org/2005/zul">
  <window id="shoppingbasket" contentStyle="overflow:auto"
    apply="au.gov.sa.environment.mappf.web.controller.ShoppingBasketController"
    width="75%" height="400px" border="normal" title="${c:l('mappf.shoppingbasket.title')}"
    closable="false" mode="modal" sizable="false">
    <borderlayout>
      <center>
        <borderlayout id="borderLayout_shoppingBasketDetails">
          <center border="normal">
            <listbox id="shoppingBasketDetails" style="overflow:auto" 
            forward="onSelect=shoppingbasket.onRowSelected()" width="100%"
            vflex="true" height="100%" multiple="false">
              <listhead  sizable="true">
                <listheader  label="Description" align="center"/>
                <listheader  label="Qty" align="center"/>
                <listheader  label="Availability" align="center"/>
                <listheader  label="Price" align="center"/>
                <listheader  label="Media" align="center"/>
                <listheader  label="Total" align="center" />
              </listhead>
            </listbox>
          </center>
          <south border="none">
            <separator />
          </south>
        </borderlayout>
      </center>
      <south>
        <div align="right">
          <checkbox id="pickupCheckbox" label="Pick Up" forward="onCheck=shoppingbasket.onPickupChecked()"/>
          <button id="removeButton" label="${c:l('mappf.shoppingbasket.remove.label')}" height="30" forward="onClick=shoppingbasket.onRemoveItem()" disabled = "true"></button>
          <button id="continueButton" label="${c:l('mappf.shoppingbasket.continue.label')}" height="30" forward="onClick=shoppingbasket.onContinueShopping()"></button>
          <button id="checkoutButton" label="${c:l('mappf.shoppingbasket.checkout.label')}" image="/images/cart02_24x24.jpg" height="30" forward="onClick=shoppingbasket.onCheckout()" disabled="true"></button>
          <button id="updateButton" label="${c:l('mappf.shoppingbasket.updatebutton.label')}" height="30" forward="onClick=shoppingbasket.onUpdate()" disabled="true"></button>
        </div>
      </south>
    </borderlayout>
  </window>
</zk>

link publish delete flag offensive edit

answered 2013-04-11 16:30:58 +0800

fiero300 gravatar image fiero300
0

Tengo esta respuesta que funciona para este caso en particular

<zk>
<window width="100%" height="100%" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')
  @init('pk.ec.cmp.CtrlTramites')">
 <style> .valor { text-align: right; } </style>
    <borderlayout>
     <center flex="true"> 
         <tabbox>
          <tabs>
            <tab label="VALORES" width="20%" image="/images/valores_32_x_32.png" />
          </tabs>
          <tabpanels>
           <tabpanel>
             <vlayout width="100%" height="100%" style="overflow:auto">
               <div width="100%" height="100%"align="justify" style="overflow:auto">    
                 <listbox id="lstProcesos" model="@bind(vm.lsProcesos)" width="100%">
                   <listhead sizable="true">
                     <listheader label="Responsable" width="7%" />
                     <listheader label="Proceso"width="8%" />
                     <listheader label="Observación en Empresa" width="34%" />
                     <listheader label="Observación para Cliente" width="34%" />
                     <listheader label="Fecha-Hora" width="11%" />
                   </listhead>
                   <template name="model" var="pro">
                   <listitem>
                      <listcell/>
                      <listcell>
                          <textbox value="@bind(pro.responsable)" width="98%" />
                      </listcell>
                      <listcell>
                          <textbox readonly="true" width="41%" value="@load(pro.xxx)"/>
                      </listcell>
                      <listcell>
                          <textbox value="@bind(pro.ObservacionEmpresa)" width="98%" />
                      </listcell>
                      <listcell>
                          <textbox value="@bind(pro.ObservacionCliente)" width="98%" />
                      </listcell>
                      <listcell>
                          <datebox format="dd/MM/yyyy, kk:mm" value="@bind(pro.dateTime)"/>
                      </listcell>
                   </listitem>
                  </template>
                </listbox>
               </div>
             </vlayout>
           </tabpanel>
          </tabpanels>
         </tabbox>
     </center>
    </borderlayout>
</window>
</zk>
link publish delete flag offensive edit

answered 2018-01-12 20:17:22 +0800

davidwiston gravatar image davidwiston
103 2

Try add in zk.xml

<library-property> <name>org.zkoss.zul.nativebar</name> <value>true</value> </library-property>

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: 2009-11-22 19:26:04 +0800

Seen: 7,330 times

Last updated: Jan 16

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