# Trouble getting listbox scrollbars to appear (zkfiddle example)

rickcr
704 7

Man, sometimes I feel like I'm working with CSS when trying to get ZK to do what I want:) I have real trouble many times getting things to work when I'm not assigning hard-coded widths and heights to UI items. Anyway...

Can I get a second pair of eyes on how I get both vertical and horizontal listbox scrollbars to appear in the following layout. I tried to strip it down based on what I'm trying to achieve in my real code.

http://zkfiddle.org/sample/1a3gfei/2-scrollbarsNotShowingUp

I have exaggerated column widths to show the horizontal scroll bar not appearing. Also if you click "get Autos" you'll notice a vertical scroll bar doesn't appear either (even though 70 items are in the list.)

Here is the pasted UI in case someone wants to look at here instead:

<window width="100%" height="100%" apply="org.zkoss.bind.BindComposer"
vflex="true"
viewModel="@id('vm') @init('net.learntechnology.AutomobilesVM')">

<borderlayout height="100%" width="100%">

<north height="200px;">
<panel width="100%" height="100%" border="rounded" sizable="true" title="North">

<panelchildren>
<vlayout height="100%" vflex="true">
<label value="Stuff"/>
<label value="Stuff Here"/>
<button label="GetAutos" onClick="@command('populateTheAutos')"/>
</vlayout>
</panelchildren>
</panel>
</north>

<center autoscroll="true">
<vlayout height="1000px;" width="100%">

<panel width="100%"  title="Autos" vflex="true" hflex="true">
<panelchildren>
<borderlayout vflex="true" hflex="true">
<center>
<vlayout style="width:100%">

<!-- ****** THIS IS THE SECTION I WANT SCROLLABLE -->

forward="onSelect=onAutoSelect"
width="2010px" height="100%">
<template name="model" var="item">
<listitem
</listitem>
</template>
</listbox>

<!-- ABOVE Listbox needs scrollbars -->

</vlayout>
</center>
<south height="24px">
<hlayout>
<button label="Button 1" onClick="@command('foo')"/>
<button label="Button 2" onClick="@command('foo2')"/>
</hlayout>
</south>
</borderlayout>
</panelchildren>
</panel>

<panel width="100%"  border="rounded" style="margin-top:5px;" title="Panel 2" vflex="true">
<panelchildren>

<borderlayout height="100%">
<center vflex="true">
<label value="The Other Panel Content"/>
</center>
<south height="24px">
<hlayout>
<label value="South Stuff"/>
</hlayout>
</south>
</borderlayout>
</panelchildren>
</panel>

</vlayout>
</center>
</borderlayout>

</window>

delete retag edit

Sort by » oldest newest most voted

cor3000
4332 1 7

I created another fiddle (using css) to limit the body height of a simple table, let's hope this scales to your application

Thanks Robert. That really helps! In my case, I was also using a borderlayout with the listbox in the center region which has some issues since looking at the docs it looks like that'll be problematic with the container of the borderlayout not having a fixed height. I can get by w/out though.

( 2013-10-01 17:18:46 +0800 )edit

note, here were some ideas as I was trying with a borderlayout inside of a panel and/or a div http://zkfiddle.org/sample/311m3io/5-tables-with-max-body-height-with-panel

( 2013-10-01 17:19:58 +0800 )edit

cor3000
4332 1 7

Hi Rick,

I updated the example so that the scrollbars appear when required The main problem was, the listbox had a fixed width of 2010px so that it did not require a scrollbar to display 4 columns of 500px, when the listbox has a smaller width (either fixed or via hflex) the scrollbars will appear.

otherwise if you want to keep the 2010 px width, you can surround the listbox with a <div hflex="1" height="300px" style="overflow: auto"> but then the column headers are hidden when scrolling down the list.

Robert

I can't get your zkfiddle example to show the horizontal scroll bars in IE9. I wish I didn't have to support IE but I do:( Looks great in Chrome though. I'm trying a few different things to get it to work in IE 9 but not having much luck. thanks so far though.

( 2013-09-27 12:33:35 +0800 )edit

It seems somehow related to it not being able to calculate the size "after" the list is repopulated (after you click the button 'show autos')? For example in this example even in IE it works since the listbox is already populated up front http://zkfiddle.org/sample/1afb8g7/2-scrollbarsNotShowingUp

( 2013-09-27 13:20:53 +0800 )edit

By the way, what I'd ultimately like is four panels each with a listbox but the listboxes can change in size based on selections made on the page.I'd really love it if they could have a set max height (and then scroll) but the minimum height would collapse down based on the number of rows.

( 2013-09-27 13:37:23 +0800 )edit
[hide preview]