-
Bug
-
Resolution: Fixed
-
Normal
-
5.0.9
When making dynamic changes to visibility of toolbar buttons for a toolbar displayed in the tabs area of a tabbox, the tabs display area grows but doesn't shrink appropriately. For example, the space given for tabs expands when the toolbar gets shorter. But if changes are made that cause the toolbar to get longer, the tabs display area does not shrink and the toolbar buttons overlay the tabs.
Using the ZK demo sandbox, go to the tabs demo and replace the default zuml with this:
<hbox> <tabbox width="500px"> <tabs> <tab label="Tab 1" closable="true"> <attribute name="onClick"> img1.setVisible(false); img2.setVisible(false); img3.setVisible(false); img4.setVisible(false); img5.setVisible(false); img6.setVisible(false); </attribute> </tab> <tab label="Tab 2" closable="true"/> <tab label="Tab 3" closable="true"> <attribute name="onClick"> img1.setVisible(true); img2.setVisible(true); img3.setVisible(true); img4.setVisible(true); img5.setVisible(true); img6.setVisible(true); </attribute> </tab> <tab label="Tab 4" closable="true"/> <tab label="Tab 5" closable="true"/> </tabs> <toolbar> <toolbarbutton id="img1" image="/img/live.gif" onClick='alert("Live")' /> <toolbarbutton id="img2" image="/img/defender.gif" onClick='alert("Defender")' /> <toolbarbutton id="img3" image="/img/battery.gif" onClick='alert("Battery")' /> <toolbarbutton id="img4" image="/img/live.gif" onClick='alert("Live")' /> <toolbarbutton id="img5" image="/img/defender.gif" onClick='alert("Defender")' /> <toolbarbutton id="img6" image="/img/battery.gif" onClick='alert("Battery")' /> <toolbarbutton id="img7" image="/img/live.gif" onClick='alert("Live")' /> <toolbarbutton id="img8" image="/img/defender.gif" onClick='alert("Defender")' /> <toolbarbutton id="img9" image="/img/battery.gif" onClick='alert("Battery")' /> <toolbarbutton id="img10" image="/img/live.gif" onClick='alert("Live")' /> <toolbarbutton id="img11" image="/img/defender.gif" onClick='alert("Defender")' /> <toolbarbutton id="img12" image="/img/battery.gif" onClick='alert("Battery")' /> </toolbar> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2 The second panel</tabpanel> <tabpanel>This is panel 3</tabpanel> <tabpanel>This is panel 4</tabpanel> <tabpanel>This is panel 5</tabpanel> </tabpanels> </tabbox> </hbox>
After editing the zuml, Click Try Me! Click tab 1, then tab 2, then tab 3.
Clicking tab 1 will make some buttons not visible.
Clicking tab 2 will cause the tabs area to resize.
Clicking tab 3 will cause the buttons to be visible again, but the tabs area will not resize resulting in the toolbar buttons being displayed on top of the tabs.
The only way I've found to prevent the overlay is to give an explicit width to the toolbar, e.g. <toolbar width="360px">
It seems to me that the tabs area should either not resize at all unless the window is resized, or it should grow/shrink according to the toolbar.