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

ZK-5433 cause scroll jumps if a tabbox has a toolbar

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Normal Normal
    • None
    • 9.6.4
    • None
    • Security Level: Jimmy
    • None

      Steps to Reproduce

      https://zkfiddle.org/sample/1dmn5gq/2-Tabbox-scroll-jump

      run fiddle
      select last tab (tab 16)
      resize window horizontally down to show scroll control on the tabs
      resize window vertically

      Current Result

      resizing vertically cause the scroll position to jump

      Expected Result

      resizing vertically doesn't cause scroll jumps

      Debug Information

      tabs beforeSize removes the last calculated width from the Tabs content div
      This cause the tabs to natively consume the entire width of the tabbox (including the width used by the toolbar)
      after this, the tabs recalculate width, which sizes back down to "total width minus toolbar width"

      As a result of these two resizing, the left scroll position has been moved left by an amount equal to toolbar width.

      Then the position is scrolled back to put the selected tab into view, causing the jump

      Workaround

      do not remove last known size from the tabs container

      <script><![CDATA[ 
		//workaround
		zk.afterLoad("zul.tab", function () {
		    var _xTabs = {};
		    zk.override(zul.tab.Tabs.prototype, _xTabs, {
		    	  beforeSize: function beforeSize() {
	    		    var tabbox = this.getTabbox(),
	    		        width = tabbox.getWidth(),
	    		        style = this.$n().style;
	
	    		    if ((!width || width.endsWith('%') || width == 'auto') && !tabbox.inAccordionMold() && !tabbox.isVertical()) {
	    		      this.$n('cave').style.width = '';
	
	    		      if (style.width) {
	    		    	if(!(tabbox._tabscroll && tabbox._scrolling && tabbox._toolbarWidth)){ //skip remiving width if is currently scrolling and has toolbar, prevent scroll jumps
		    		        style.width = '';
	    		    	}
	    		        if (!tabbox.isTabscroll()) tabbox.$n().style.width = '';
	    		      }
	    		    }
	    		  }
		     });
		});
	]]></script>

            Unassigned Unassigned
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: