How to get listbox to show a vertical scroll bar

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

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>