background
Users wants a floating scrollbar style like facebook, so they need a customizable, non-native scrollbar.
steps to reproduce
- run http://zkfiddle.org/sample/1vrjjhd/2-borderlayout-scrollbar
<borderlayout vflex="1" class="mainCenterArea"> <custom-attributes org.zkoss.zul.nativebar="false"/> <west size="350px" border="0" class="menuGroupboxContainer" autoscroll="true"> <vbox id="menuContainer" hflex="1" spacing="0"> <groupbox class="menuGroupbox" open="false" hflex="1"> <caption label="Layer1 A" /> <vbox> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> <label value="Layer2 A" /> </vbox> </groupbox> <groupbox class="menuGroupbox" open="false" hflex="1"> <caption label="Layer1 B" /> <vbox> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> <label value="Layer2 B" /> </vbox> </groupbox> </vbox> </west> </borderlayout>
- shrink height less than 500px
- open 2 groupboxes
result
no vertical scrollbar
expected result
vertical scrollbar appears.
h2 .debug info
- it doesn't happen when <custom-attributes org.zkoss.zul.nativebar="true"/>