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

Menubar scrollable trigger doesn't exclude invisible items from calculation

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.0.5
    • Fix Version/s: 8.5.1
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None

      Description

      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>
      

        Attachments

          Activity

            People

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

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                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