Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Version: 3.6.0
Issue:
Scrollbar quickly flickers into view then exits when opening modal window
Steps:
1) Prereq: Within tablelayout
2) Create:
<button id="someButton" label="Advanced">
<attribute name="onClick">{
final Window win =
(Window) Executions.createComponents("/zul/someRandomWindow.zul",null,null);
}</attribute>
</button>
3) Create in someRandomWindow.zul:
<window id="something"
title="something"
position="center,top"
mode="modal"
border="normal"
width="525px"
action="onshow:anima.appear(#{self});onhide:anima.fade(#{self})">
<caption>
<toolbarbutton label="Close" onClick="something.detach()"/>
</caption>
...
</window>
4) Click: button from step 2 in Firefox
5) ** Notice: scrollbar flicker
6) Close: popup window
7) Click: button from step 2 again
8) ** Notice: NO scrollbar flicker unlike step 5
Comments: Is there a special "render" method I need to call first? Any ideas why the scrollbar would flicker the first time but not the following?
Thank you
hi Richard,
i tried it on my firefox(both v2.0.0.20 and v3.0.7) and it works fine, without any scrollbar.
Here is my test code
<tablelayout columns="3">
<tablechildren>
<panel height="247px" title="table2" border="normal">
<panelchildren>
<button id="someButton" label="Advanced">
<attribute name="onClick">{
final Window win =
(Window) Executions.createComponents("test.zul",null,null);
}</attribute>
</button>
</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel height="247px" title="table2" border="normal"
collapsible="true">
<panelchildren>
<html>
<h4>Direct RIA</h4> <ul>
<li>Boosting Productivity</li>
<li>Minimal Maintenance</li>
<li>Engaging User Experience</li>
<li>Fast Prototyping</li>
<li>Real-time Push</li> </ul>
</html>
</panelchildren>
</panel>
</tablechildren>
<tablechildren colspan="2">
<panel title="table4" border="normal" collapsible="true">
<panelchildren>
ZK: No1. Ajax + Mobile
</panelchildren>
</panel>
</tablechildren>
</tablelayout>am i misunderstand ur problem ?
Well, it seems dependent on how complex your test.zul file is. If you use a zul file that is very complex or has images, this seems to happen consistently.
that's ok, :)
maybe you can provide a zul file ? or post it to our bug tracker
we will keep following it.
<window id="zxcv" title="asdfasdfasdf" position="center,top" mode="overlapped" height="550px" border="normal" width="525px" action="onshow:anima.appear(#{self});onhide:anima.fade(#{self})">
<caption>
<toolbarbutton label="Close" onClick="zxcv.detach()"/>
</caption>
<grid>
<columns>
<column width="20%"></column>
<column width="100%"></column>
</columns>
<rows>
<row>
<label value="asdf: "/>
<textbox width="100%"/>
</row>
<row>
<label value="asdf: "/>
<textbox width="100%" rows="5"/>
</row>
<row>
<label value="asdf: "/>
<combobox>
<comboitem label="asdf"/>
<comboitem label="asdf"/>
<comboitem label="asdf"/>
<comboitem label="asdf"/>
</combobox>
</row>
</rows>
</grid>
<separator/>
<columnlayout>
<columnchildren width="50%">
<panel title="asdfasdf">
<panelchildren>
<listbox id="left" multiple="true" checkmark="true" height="300px" fixedLayout="true">
<listitem selected="true">
<listcell src="/img/common/briefcase-16x16.png" label="asdf"/>
</listitem>
<listitem>
<listcell src="/img/common/briefcase-16x16.png" label="asdf"/>
</listitem>
<listitem>
<listcell src="/img/common/briefcase-16x16.png" label="asdf"/>
</listitem>
<listitem>
<listcell src="/img/common/briefcase-16x16.png" label="asdf"/>
</listitem>
<listitem>
<listcell src="/img/common/briefcase-16x16.png" label="asdf"/>
</listitem>
</listbox>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="100px">
<panel>
<panelchildren style="margin: 70px 34px;">
<image sclass="pointer" src="/img/common/buttonArrowRightDouble.png" tooltiptext="Add asdf">
<attribute name="onClick">
Set items = left.getSelectedItems();
if (items.isEmpty()) {
alert("Please select at least one asdf to add!");
} else {
List al = new ArrayList(items);
for (Iterator it = al.iterator(); it.hasNext();) {
Listitem li = (Listitem)it.next();
li.setSelected(false);
right.appendChild(li);
}
}
</attribute>
</image>
<separator height="15px"/>
<image sclass="pointer" src="/img/common/buttonArrowLeftDouble.png" tooltiptext="Remove asdf">
<attribute name="onClick">
Set items = right.getSelectedItems();
if (items.isEmpty()) {
alert("Please select at least one asdf to remove!");
} else {
List al = new ArrayList(items);
for (Iterator it = al.iterator(); it.hasNext();) {
Listitem li = (Listitem)it.next();
li.setSelected(false);
left.appendChild(li);
}
}
</attribute>
</image>
</panelchildren>
</panel>
</columnchildren>
<columnchildren width="50%">
<panel title="asdfasdf">
<panelchildren>
<listbox id="right" multiple="true" checkmark="true" height="300px" fixedLayout="true">
<listitem selected="true">
<listcell src="/img/common/briefcase-16x16.png" label="asdfasdf"/>
</listitem>
</listbox>
</panelchildren>
</panel>
</columnchildren>
</columnlayout>
<separator/>
<div align="center">
<button id="asdf" label="Submit" onClick='alert("here")'/>
</div>
</window>
how can i duplicate the problem ? the zul you provide is "someRandomWindow.zul" ?
Sorry, yes, that is the "someRandomWindow.zul"
ok i found the problem, it happens only during the window is attach to tablelayout and move to overlapped,
browser is counting the size of new component, so the scrollbar flicker.
imo, the work around is that you can create a hidden div like
<div id="hidden" style="display:none;overflow:hidden;"/>
final Window win = (Window) Executions.createComponents("someRandomWindow.zul",hidden,null);*the "overlapped" will move the window out of the div
Thank you, your suggestion did fix the scrollbar flicker however the window failed to render properly.
Oddly, the dropdown became deformed (textarea smaller than dropdown image), the column layout did not render and nor did the bottom border.
Did it render completely on your end?
yes... it render correctly :S
Asked: 2009-03-25 22:20:26 +0800
Seen: 487 times
Last updated: Apr 14 '09