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

tabbox scroll unsynced when resizing with toolbar

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • Normal
    • 9.6.4
    • 9.6.3
    • None
    • Security Level: Jimmy

    Description

      Steps to Reproduce

      https://zkfiddle.org/sample/jq2t88/1-Another-new-ZK-fiddle

      Run fiddle
      Resize browser window enough for about 5 tabs to be visible
      Use the scroll button (right) to scroll to the last item (tab16)
      Select tab15
      Resize the browser window slightly larger

      Current Result

      Scroll position is offset left by the size of the toolbar to the right of the scroll container
      Scroll to the right is not possible

      Expected Result

      scroll position is maintained between resizes,
      scroll to right is still possible if the position is not right-most

      Debug Information

      tabs.scrollLeft is reset by the _syncScroll function on tabbox (because the container is calculated without the toolbar to the right.
      Tabbox state is still fully scrolled, when it's actually offset by the width of the toolbar.

      Workaround

      <script><![CDATA[
      		//workaround
      		zk.afterLoad("zul.tab", function () {
      		    var _xTabs = {};
      		    zk.override(zul.tab.Tabs.prototype, _xTabs, {
      		        _scrollcheck: function(way, tb) {
      					var result = _xTabs._scrollcheck.apply(this, arguments);
      				    if (!this.desktop || tabbox && (!tabbox.isRealVisible() || !tabbox.isTabscroll())) return;
      				    var tabbox = this.getTabbox();
      				    var tabs = this.$n(),
      				            tbx = tabbox.$n();
      					if (!tabbox.isVertical() && !tabbox.inAccordionMold()){
      				          sel = tabbox.getSelectedTab(),
      			                  node = tb ? tb.$n() : sel ? sel.$n() : null,
      			                  nodeOffsetLeft = node ? node.offsetLeft : 0,
      			                  nodeOffsetWidth = node ? node.offsetWidth : 0,
      					          tabsOffsetWidth = tabs.offsetWidth,
      			                  tabsScrollLeft = this._tabsScrollLeft;
      				          tabs.scrollLeft = tabsScrollLeft;
      					}
      					return result;
      		        }
      		     });
      		});
      	]]></script>
      

      Attachments

        Issue Links

          Activity

            People

              DevChu DevChu
              MDuchemin MDuchemin
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: