Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
hi all,
it seems there is a bug related to Tabpanel+Borderlayout combination.
(EDIT: this seems to not affect 5.0.7)
steps to reproduce:
1. create a Tabbox with Tabs and Tabpanels;
2. create 4 Tab and Tabpanel;
3. add 3 Borderlayout, each with North and Center onto the each of Tabpanel created in step 2 _other than_ the first tab;
4. setSize, say "50px", to the 3 North in step 3;
5. for each Center, add a Listbox with ListModelList;
6. add the 4 Tab and Tabpanel to Tabs and Tabpanels created in step 1;
7. add some objects to 3 ListModelList;
8. ----> all the North become inaccessible (seems to be with height of "0px")
the symptom is similar to :
http://tracker.zkoss.org/browse/ZK-620?page=com.atlassian.jira.plugin.system.issuetabpanels%3Aall-tabpanel
the bug was only partially fixed; the North displays correctly _but_ after you add something to ListModelList/Listbox, the North become inaccessible again.
i hope i've made the point clear... and it seems to be a bug... please look into this issue.
i tested it with ZK CE 5.0.10 and 6.0.0 rc2.
thanks a lot!
zelda
Hi zelda,
This bug has been fixed in ZK 5.0.10. Please upgrade to ZK 5.0.10 to see if there is any further issues.
Download link: http://www.zkoss.org/download/zk
i've just tested with 5.0.10 release, and the problem is still there.
the bug has been filed previously and reported to be fixed, but, as i mentioned, it was only partially fixed.
recalling the step 7 of my first post, "after" i add the objects to the ListModelList backing the Listbox within the problematic tabpanel+borderlayout, the problem is there again.
i've tested my zk app built with zk 5.0.10 release in IE 8 and Firefox 9, and in both browsers, the North in the Borderlayout (within the Tabpanel) becomes invisible.
for the moment, i'll be staying with 5.0.7.1, which is not affected by this problem. in zk 6 test versions, the bug is also there.
please look into it, ZK team.
thanks!
zelda
Hi zelda,
I followed your step and only reproduced an issue like the previously mentioned bug (http://tracker.zkoss.org/browse/ZK-620).
Can you show us a reproducible sample?
Hi zelda and matthewgo...
I have the exact same problem... The borderlayout is displayed correctly when it's loaded at the first time but when the listmodel is loaded, the sections around CENTER become invisible. But this happens if the tab is not selected. It's really weird.
I had the problem working with 5.0.9. I've upgraded to 5.0.11 trying to "fix" the bug, but it's still causing problems.
So, like zelda said, "the bug has been filed previously and reported to be fixed, but, as i mentioned, it was only partially fixed."
Any news about this?
Thanks!
Hi again.
Try this to see the bug:
<zk>
<zscript>
<![CDATA[
ArrayList<String> list = new ArrayList<String>();
private void loadItems(int items){
int itemN = list.size();
for (int i = 0; i < items; i++){
list.add("Item "+itemN);
itemN++;
}
listbx1.setModel(new ListModelList(list));
listbx2.setModel(new ListModelList(list));
}
]]>
</zscript>
<vlayout width="500px" vflex="1" spacing="20px" onCreate="loadItems(5);">
<label value="This is an example to show a bug on Tabpanel+Borderlayout using ZK 5.0.11"></label>
<groupbox mold="3d">
<caption label="Instructions"></caption>
<vbox>
<label value="1.- Check both tabs: listboxes have 5 items and all borderlayouts sections are visible"></label>
<label value="2.- Select TAB 1"></label>
<label value="3.- Load and item using the button."></label>
<label value="4.- Now select TAB 2 and see what happened with the borderlayout sections."></label>
</vbox>
</groupbox>
<tabbox height="300px">
<tabs>
<tab label="TAB 1"></tab>
<tab label="TAB 2"></tab>
</tabs>
<tabpanels>
<tabpanel>
<borderlayout width="100%" height="100%" style="background: transparent;">
<north size="50px" style="background: red;"></north>
<west size="50px" style="background: yellow;"></west>
<center flex="true" style="background: black">
<listbox id="listbx1">
<listhead>
<listheader label="Col1" sort="auto"></listheader>
</listhead>
</listbox>
</center>
<east size="50px" style="background: blue;"></east>
<south size="50px" style="background: green;"></south>
</borderlayout>
</tabpanel>
<tabpanel>
<borderlayout width="100%" height="100%" style="background: transparent;">
<north size="50px" style="background: red;"></north>
<west size="50px" style="background: yellow;"></west>
<center flex="true" style="background: black">
<listbox id="listbx2">
<listhead>
<listheader label="Col1" sort="auto"></listheader>
</listhead>
</listbox>
</center>
<east size="50px" style="background: blue;"></east>
<south size="50px" style="background: green;"></south>
</borderlayout>
</tabpanel>
</tabpanels>
</tabbox>
<button label="LOAD ITEM" onClick="loadItems(1);" width="200px" height="50px"></button>
</vlayout>
</zk>
It has something to do with another bug
http://tracker.zkoss.org/browse/ZK-1158
to work around, remove the flex="true" in <center> region and use hflex and vflex in listbox:
<center>
<listbox hflex="true" vflex="true">
</listbox>
</center>Thanks for the tip henrichen, it works just fine for the example I shared.
But in the application I'm working, the "flex tip" doesn't work, maybe it's something else I need to change.
On the other hand, the "invalidate tip" works perfectly in my app.
Hope ZK team can fix it for 6.0.2 version.
Thank you all for your help.
Hi ragm87,
Please do not use flex="true" to occupy the whole area, set vflex="1" to the child component.
http://books.zkoss.org/wiki/ZK_Component_Reference/Layouts/Borderlayout#flex
Asked: 2011-12-31 10:17:45 +0800
Seen: 455 times
Last updated: May 29 '12
