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

tabbox scroll unsynced when resizing with toolbar

XMLWordPrintable

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

      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>
      

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

              Created:
              Updated:
              Resolved: