Steps to Reproduce
resize the browser window (horizontally)
<zk> <tabbox orient="vertical" height="500px"> <tabs width="150px"> <tab label="tab-1"/> </tabs> <tabpanels> <tabpanel style="background-color: yellow;"> </tabpanel> </tabpanels> </tabbox> </zk>
Current Result
when reducing the size the tabpanel is flickering heavily
rarely (depends on when the mouse is released) the tabpanel remains hidden
Expected Result
no flickering
tabpanel not disappearing completely
Debug Information
the tabpanel is not really removed, it simply line-breaks below the <tabs> area - appearing invisible
Workaround
define calculated max width on the <tabpanels> component
max-width: calc(500px - 150px)
<tabbox orient="vertical" height="500px"> <tabs width="150px"> <tab label="tab-1"/> </tabs> <tabpanels style="max-width: calc(100% - 150px);"> <tabpanel style="background-color: yellow;"> </tabpanel> </tabpanels> </tabbox>
- relates to
-
ZK-298 vertical tabbox height is not correct
- Closed