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

Menubar scrollable trigger doesn't exclude invisible items from calculation

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.5.1
    • 8.0.5
    • None
    • Security Level: Jimmy
    • None
    • None

      Steps to Reproduce

      http://zkfiddle.org/sample/188f7qd/5-menubar-invisible-menu-size-calculation-no-workaround
      Run fiddle
      Resize the windows down, close to menu items, but do not cover the menus.

      Current Result

      Scrollable triggers while width is still enough to display all items

      Expected Result

      Scrollable should only trigger if width is too small to host all visible items

      Debug Info

      zul.menu.Menubar.prototype._checkScrolling() count each child size, even if they are not currently visible.

      Root Cause

      https://github.com/zkoss/zk/blob/5754625fdceec45f391123b46b1149b6a4e8e61b/zul/src/archive/web/js/zul/menu/Menubar.js#L145

      Workaround

      http://zkfiddle.org/sample/188f7qd/3-menubar-invisible-menu-size-calculation

      For ZK 8.0.4.2

      <script><![CDATA[ 
      		zk.afterLoad('zul.menu', function() {
      			var xMenubar = {};
      			zk.override(zul.menu.Menubar.prototype, xMenubar ,{
      				_checkScrolling: function () {
      					if (!this.checkScrollable()) return;
      			
      					var node = this.$n();
      					if (!node) return;
      					jq(node).addClass(this.$s('scroll'));
      			
      					var nodeWidth = zk(node).offsetWidth(),
      						body = this.$n('body'),
      						childs = jq(this.$n('cave')).children(),
      						totalWidth = 0;
      			
      					for (var i = childs.length; i--;)
      						if(zk(childs[i]).$().isVisible())
      							totalWidth += jq(childs[i]).outerWidth(true); 
      			
      					if (zk.ie) 
      						totalWidth += childs.length;
      			
      					if (totalWidth >= nodeWidth)
      						this._scrolling = true;
      					else {
      						this._scrolling = false;
      						body.scrollLeft = 0;
      						 
      						body.style.width = '';
      					}
      					this._fixButtonPos(node);
      			
      					var fixedSize = nodeWidth - zk(this.$n('left')).offsetWidth() - zk(this.$n('right')).offsetWidth();
      					if (this._scrolling) {
      						body.style.width = jq.px0(fixedSize);
      						this._fixScrollPos(node);
      					}
      				}
      			});//zk.override
      		});//zk.afterLoad
      	]]></script>
      

            rudyhuang rudyhuang
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Time Spent - 2 hours Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - 2 hours Remaining Estimate - 2 hours
                2h