Details
-
Type:
Bug
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: 8.5.2.1
-
Fix Version/s: 8.6.0
-
Component/s: Components
-
Security Level: Jimmy
-
gh.sprint.customfield.default.name:ZK 8.6.0 S2
Description
Steps to Reproduce
run the snipped using a classic theme, e.g. breeze
<zk> <tabbox width="500px"> <tabs id="tabs"/> <tabpanels height="100px"/> </tabbox> <button label="Add Tab"> <attribute name="onClick"><![CDATA[ Tab tb = new Tab(); tb.setLabel("Tab panel test test test test"); tb.setClosable(true); tb.setSelected(true); tabs.appendChild(tb); ]]></attribute> </button> </zk>
add tabs until the tabs become scrollable
Current Result
the tabs line break
Expected Result
tabs should not line break and become scrollable instead
Workaround
adding the workaround styles below hide the problem in modern browsers and IE11
.z-tabs-content {
display: flex;
}
.z-tabs::before {
content: ' ';
display: block;
position: absolute;
bottom: 0px;
height: 1px;
border-bottom: 1px solid #cfcfcf;
width: 10000px;
}
