Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4051

scrollable tabbox tabs breaking in classic themes

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • Major
    • 8.6.0
    • 8.5.2.1
    • Components
    • Security Level: Jimmy
    • 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;
      		}
      

      Attachments

        Issue Links

          Activity

            People

              wenninghsu wenninghsu
              cor3000 cor3000
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: