# ZK 7.X - Horizontal Scroll Bar hides the last row of listbox

blin
45 3

In ZK 7.X, when total width of columns exceeds the maximum width of a listbox, a horizontal scroll bar appears when you hover over the listbox. However this horizontal scroll bar hides the last row in the list. Is there a way to display the horizontal scroll bar without hiding the last row of the listbox? Thanks in advance!

Example:

<window title="listbox demo" border="normal" width="250px">
<listbox id="box">
<listitem>
<listcell label="Mary" />
<listcell label="FEMALE" />
</listitem>
<listitem>
<listcell label="John" />
<listcell label="MALE" />
</listitem>
<listitem>
<listcell label="Jane" />
<listcell label="FEMALE" />
</listitem>
<listitem>
<listcell label="Henry" />
<listcell label="MALE" />
</listitem>
<listfoot>
<listfooter>
<label value="This is footer1" />
</listfooter>
<listfooter>
<label value="This is footer2" />
</listfooter>
</listfoot>
</listbox>
</window>

delete retag edit

Sort by » oldest newest most voted

windeyu
288 3

I think it maybe due to change to the default value for nativebar in 7.0.2.

In 7.0.2 release note: "Due to the better user-friendly for the scrollbar layout, we changed the org.zkoss.zul.nativebar of the library property to true by default for Grid, Listbox, Tree and Borderlayout component."

You can try to change the property to true in zk.xml of your current ZK version.

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


Darksu
1991 1 4

Hello blin,

Furthermore is there a reason that you have defined your listheader widths and specifically with greater values than your window width? It is recommended to use percentages.

Best Regards,

Darksu

blin
45 3

Hi Darksu,

Thank you for your response! I defined the listheader widths in absolute value order for the horizontal scroll bar to show, but looks like the problem can only be duplicated in our environment. We use ZK default breeze theme.

I compared this simple zul within our development environment vs. ZK Fiddle by using Breeze 7.0.2 and found some difference in style.

1) For z-listbox-body, our enviornment set it to "overflow:hidden", zk Fiddle set it to"overflow:auto"

2) Our environment has an extra element having zk-scrollbar / zk-scrollbar-horizonal style, zk Fiddle has no such element

Please click the following link for a screenshot to get a clearer view. http://picpaste.com/example-07hw4piq.png

blin
45 3

Thank you so much and this solved my problem !!! Bing

[hide preview]