Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi, I've a bit big problem; I'm trying to use the paging component associated with the listbox component inside a panel component. OK, If the listbox has many listitem appears vertical scrollbar but the arrow at the bottom of the vertical scrollbar is not visible!
Now, if I'm trying to remove paging component the arrow at the bottom of the vertical scrollbar is visible!!!!!
following, I carry code samples that I use:
sample 1 with paging component:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="new page title" border="normal" width="100%"
height="100%">
<borderlayout>
<north style="width:100%;height:200px;">NORTH</north>
<center style="width:100%;height:100%;">
<panel title="listbox" style="width:100%;height:100%;">
<panelchildren>
<paging/>
<listbox id="dataList"
fixedLayout="true" vflex="true">
<listhead>
<listheader label="id" />
<listheader
label="utente" />
<listheader label="ip" />
<listheader
label="sessionid" />
<listheader
label="data" />
<listheader
label="livello" />
<listheader
label="locazione" />
<listheader
label="messaggio" />
</listhead>
</listbox>
<zscript>
<![CDATA[
for (int i = 1; i <= 50; i++) {
Listitem li = new Listitem();
for (int j = 1; j <= 8; j++) {
new Listcell("item: " + j).setParent(li);
}
li.setParent(dataList);
}
]]>
</zscript>
</panelchildren>
</panel>
</center>
<south style="width:100%;height:100px;">SOUTH</south>
</borderlayout>
</window>
</zk>
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="new page title" border="normal" width="100%"
height="100%">
<borderlayout>
<north style="width:100%;height:200px;">NORTH</north>
<center style="width:100%;height:100%;">
<panel title="listbox" style="width:100%;height:100%;">
<panelchildren>
<listbox id="dataList"
fixedLayout="true" vflex="true">
<listhead>
<listheader label="id" />
<listheader
label="utente" />
<listheader label="ip" />
<listheader
label="sessionid" />
<listheader
label="data" />
<listheader
label="livello" />
<listheader
label="locazione" />
<listheader
label="messaggio" />
</listhead>
</listbox>
<zscript>
<![CDATA[
for (int i = 1; i <= 50; i++) {
Listitem li = new Listitem();
for (int j = 1; j <= 8; j++) {
new Listcell("item: " + j).setParent(li);
}
li.setParent(dataList);
}
]]>
</zscript>
</panelchildren>
</panel>
</center>
<south style="width:100%;height:100px;">SOUTH</south>
</borderlayout>
</window>
</zk>I USE:
- FIREFOX 3.5.2
- ZK RELEASES 3.6.2
thank you very much!
ORAZIO
Change
listbox id="dataList"
fixedLayout="true" vflex="true">
to
listbox id="dataList"
fixedLayout="true" vflex="true" style="overflow:scroll;">
i m trying ur workround, but not work very well in all browser:
- FF 3.5.2: view 1/3 about bottom arrow!
- IE7: no view bottom arrow!
- Chrome: view 1/3 about bottom arrow!
- Opera 9.64: view 1/3 about bottom arrow!
- Safari 4: view 1/3 about bottom arrow!
thans very much :-(
Orazio
I tested with Google Chrome 2.0.173.1 and FF 3.52 getting results as you got
In IE 6.0. Does no appear any scrollbar...!
But any head disappears...!
Please test by adding a height to the listbox def
istbox id="dataList"
fixedLayout="true" vflex="true" style="overflow:scroll;" height="92%">
thanks for your advice @YamilBracho, I solved the problem even if partially!!
if I resize the window, even a little, unfortunately, the arrow disappears entirely or partially
I think this is a bug of the components listbox and grid when using the properties fixedLayout="true" and vflex="true"
ORAZIO
Orazio
take a try with the following construction:
you must adapt it to your needs.
<borderlayout id="borderLayout_customerList">
<north border="none" height="26px">
<paging id="pagingCustomerList" pageSize="20" />
</north>
<center border="normal">
<listbox id="listBoxCustomer" vflex="true"
tooltiptext="${c:l('listbox.tooltiptext')}" width="99.5%"
height="100%" multiple="false">
<listhead sizable="true">
<listheader id="listheader_CustNo"
image="/images/icons/builder.gif"
label="${c:l('listheader_CustNo.label')}" sort="auto" width="5%" />
<listheader id="listheader_CustMatchcode"
image="/images/icons/create_doc.gif"
label="${c:l('listheader_CustMatchcode.label')}" sort="auto"
width="15%" />
<listheader id="listheader_CustName1"
image="/images/icons/create_doc.gif"
label="${c:l('listheader_CustName1.label')}" sort="auto"
width="20%" />
<listheader id="listheader_CustName2"
image="/images/icons/create_doc.gif"
label="${c:l('listheader_CustName2.label')}" sort="auto"
width="20%" />
<listheader id="listheader_CustCity"
image="/images/icons/home_blue16x16.gif"
label="${c:l('listheader_CustCity.label')}" sort="auto"
width="20%" />
<listheader
image="/images/icons/edittsk_tsk1.gif" label="Mahnsperre"
width="10%" />
</listhead>
</listbox>
</center>
<south border="none">
<separator />
</south>
</borderlayout>
regards
Stephan
Hi Stephan,
Considering the theme "listbox & scroll", I would like to present you another ''anomaly'' (I have noticed this problem during my work, as well as in ''ZK Live Demo >> ListBox Live Data"):
In "ZK Live Demo >> ListBox Live Data", there are 10 items visible (0 to 9) and other hidden (total 30); ok, if you move down with arrow key,10+1 items selected could be seen (the other ones seem to be hidden).
In my example, I have 16 items visible, I scrolling down with arrow key I can see 16+1, and for the other items (total 40) there is the same problem.
How can I synchronize vertical scrollbar with select item with arrow key?
I hope you understand me!
best regards
Orazio
Asked: 2009-09-03 09:33:04 +0800
Seen: 718 times
Last updated: Sep 08 '09