-
Bug
-
Resolution: Fixed
-
Major
-
7.0.5, 8.6.1, 8.6.4.1, 9.5.0.1
-
Security Level: Jimmy
-
ZK 9.5.1 S1
Steps to Reproduce
1. run the zul
<zk> <label value="ZK 8 will fail if you scroll 2 scrollbars from the top and hide than show Panel. ZK 9 will work"/> <checkbox label="Check to hide" checked="true" onCheck="div.visible=!div.visible" /> <panel id="div" hflex="1" vflex="1" visible="true"> <panelchildren> <hlayout vflex="1"> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;"> <div height="1200px"></div> </div> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;"> <div height="1200px"></div> </div> <div hflex="1" vflex="1" style="overflow-x:hidden;overflow-y:auto;" > <div height="1200px"></div> </div> </hlayout> </panelchildren> </panel> </zk>
For 9.5.0.1, the same code with <custom-attributes org.zkoss.zul.css.flex="false"/>
2. move the scrollbar of the 1st and 2nd div to the middle
3. click the checkbox to hide and show the panel
Current Result
zk.wpd:26179 Uncaught RangeError: Maximum call stack size exceeded
at zk (zk.wpd:10004)
at init.isWatchable_ (zk.wpd:22791)
at _visible (zk.wpd:15137)
at _visiChildSubset (zk.wpd:15159)
at _fire (zk.wpd:15240)
at Object.fireDown (zk.wpd:15470)
at Object.fireDown (zk.wpd:17254)
at Object.fireSized (zk.wpd:18061)
at init.beforeChildrenFlex_ (zul.box.wpd:394)
at Object.fixFlex (zk.wpd:27752)
Expected Result
show the panel without the error
Debug Info
- 9.0.0. or above doesn't have this bug by default unless CSS flex is turned off.
- 6.5.8.1 is unaffected.
Workaround
<panel id="div" vflex="1" width="100%" visible="true">
<panelchildren>
<hlayout vflex="1" width="100%">
<div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;">
<div height="1200px"></div>
</div>
<div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;">
<div height="1200px"></div>
</div>
<div hflex="1" height="100%" style="overflow-x:hidden;overflow-y:auto;" >
<div height="1200px"></div>
</div>
</hlayout>
</panelchildren>
</panel>
<style>
.z-hlayout-inner{
height: 100%;
}
</style>
