-
Bug
-
Resolution: Fixed
-
Normal
-
8.6.1, 9.0.0
-
Security Level: Jimmy
Steps to Reproduce
1.
<zk> <tabbox orient="top" hflex="1" vflex="1"> <tabs> <tab label="Tab 1"/> <tab label="Tab 2"/> </tabs> <tabpanels> <tabpanel> <tabbox orient="left" hflex="1" vflex="1"> <tabs> <tab label="Tab 1"/> <tab label="Tab 2"/> </tabs> <tabpanels> <tabpanel>Panel 1</tabpanel> <tabpanel>Panel 2</tabpanel> </tabpanels> </tabbox> </tabpanel> <tabpanel>Panel 2</tabpanel> </tabpanels> </tabbox> </zk>
Current Result
the 2nd tab in the inner tabbox disappears (invisible)
Expected Result
the 2nd tab in the inner tabbox is visible)
Debug Information
- the inner tabbox style is affected by outer tabbox
- A side effect of
ZK-4072: https://github.com/zkoss/zk/commit/918a8203eb871cecc3aaa347ec75a491170dd01a#diff-ff9854e523405766868dd7ff9b6f2034R116
.z-tabbox-top .z-tab affects every tab inside the Tabbox. - this bug happened before, see
ZK-2100. It's better to conclude a principle to avoid happening again, e.g. use more specific selector for container and layout components. Because they all could be nested.
Workaround
.z-tabbox-left>.z-tabs .z-tab{
display: block;
}
