Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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>
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.)
@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
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>
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>
>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>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>
Try add in zk.xml
<library-property> <name>org.zkoss.zul.nativebar</name> <value>true</value> </library-property>
Asked: 2009-11-22 19:26:04 +0800
Seen: 7,418 times
Last updated: Jan 16 '18
