Change listbox size dynamically

asked 2008-08-08 18:06:07 +0800

christian
136 ● 2 ● 4

Hi,

i have a problem: i would change the size of a listbox dynamically, but the listbox dosn't seem to recalculate it's size properly.

I created a minimal sample to show my problem:
You will see a window that is sizeable. If you change the window's size you will see the listbox will stick to its inital width, and not scaling wider or narrower.

in my final application my problem is the box is much wider then the space available, but i have no idea how to tell the box to resize itself to the visible width...

Just have a look at the attached sample:

<?xml version="1.0" encoding="UTF-8"?>
<?page style="height: 100%; margin: 0px;" ?>

<div xmlns="http://www.zkoss.org/2005/zul" height="100%">
	<window id="modal" title="Test" mode="modal" left="20" top="20" width="400px" height="200px" border="normal" sizable="true" closable="true">
		<listbox id="itemListBox">
			<listhead>
				<listheader label="ID" sort="auto"/>
				<listheader label="list header 2" sort="auto"/>
				<listheader label="list header 3" sort="auto"/>
			</listhead>
			<listitem >
				<listcell label="0"/> 
				<listcell label="Hello World Col 2"/> 
				<listcell label="World"/> 
			</listitem>
		</listbox>
	</window>
</div>

thanks,
chris

delete flag offensive retag edit

4 Replies

Sort by » oldest newest

answered 2008-08-09 12:22:38 +0800

natnan
27

well,in your application you can add into the method that makes the listbox exceed your windows

yourListbox.setWidth(modalWindow.getWidth() + calculations you want)

link publish delete flag offensive edit

answered 2008-08-11 07:51:24 +0800

christian
136 ● 2 ● 4

hi natnan,

i already tried this, but it doesn't provide the result i expected.

listbox.setWidth() only seems to change the width of the "outer listbox container div" and doesn't a entire resize / recalculation of the listbox itself.

if i add an button to my page like this:

	<button label="setWidth 350">
		<attribute name="onClick">
			itemListBox.setWidth("350px");
		</attribute>
	</button>

and press the button the container gets smaller, but i have a scrollbar and some of the listbox content is outside the visible area - even though all listbox content would obviously fit into the visible area.

so i assume only the container is resized, but not the listbox itself.

The problem occurred after upgrading from zk 3.0.3 to zk 3.0.7. I just double checked it with 3.0.3 - it works. Not perfect, but the listbox itself scales.

Is this an intended behavior?

cheers,
chris