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

scrollable tabbox tabs breaking in classic themes

    XMLWordPrintable

    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
    • Labels:
    • 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;
      		}
      

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                Created:
                Updated:
                Resolved: