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

selected tab not scrolling into view

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • Normal
    • 8.6.1
    • Freshly, 8.6.0
    • Components
    • Security Level: Jimmy
    • happens with a classic theme (e.g. breeze/sapphire/silvertail)

    Description

      Steps to Reproduce

      	<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>
      

      click button to add multiple tabs

      Current Result

      the selected tab does not scroll into view.

      Expected Result

      tab scrolls into view when selected

      Debug Info

      Root Cause

      problem became visible after fixing ZK-4051

      the left position is calculated while the new tab is still breaking to the next line
      using styles to avoid the line breaking in the first place can avoid this (see workaround: float replaced by inline block, nowrap )

      It even looks like recalculating the z-tabs-content width seems to become unnecessary, allowing for simpler JS code.

      additional/specific style rules might be necessary for z-tabbox-bottom

      Workaround

      adding theme specific styles e.g. for breeze:

      tested on chrome/ff/IE11 (10-8 emulated),edge

      .breeze .z-tabbox-top > .z-tabs > .z-tabs-content {
      	white-space: nowrap;
      	width: initial!important; /*not necessary but shows a calculated width is maybe not needed at all*/
      }
      .breeze .z-tabbox-top > .z-tabs > .z-tabs-content > .z-tab {
      	display: inline-block;
      	float: none;
      	vertical-align: bottom;
      }
      

      Attachments

        Issue Links

          Activity

            People

              Leon03 Leon03
              cor3000 cor3000
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 1 day, 4 hours
                  1d 4h
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 4 hours
                  1d 4h