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

Mesh doesn't set height on body when using CSS flex

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Normal
    • 10.0.0
    • 10.0.0, 9.6.4
    • None
    • Security Level: Jimmy
    • None

    Description

      Steps to Reproduce

      Run fiddle
      https://zkfiddle.org/sample/k2q906/152-listbox-doesn-t-calc-height-CSS-flex

      Current Result

      no scrollbar, cannot scroll

      Expected Result

      has scrollbar

      Debug Information

      _calcHgh checks for style height info, doesn't exist with CSS flex

      Workaround

      disable CSS flex for the listbox only

            <listbox vflex="1" width="200px">
               <custom-attributes org.zkoss.zul.css.flex="false"/>
      
      

      OR

      <script><![CDATA[  
      	zk.afterLoad("zul.sel", function () {
      	    var _xListbox = {};
      	    zk.override(zul.sel.Listbox.prototype, _xListbox, {
      	    	 _calcHgh: function _calcHgh() {
      	    	      var rows = this.ebodyrows ? this.ebodyrows.rows : [],
      	    	          n = this.$n(),
      	    	          hgh = n.style.height,
      	    	          isHgh = hgh && hgh != 'auto' && hgh.indexOf('%') < 0;
      
      	    	      if (isHgh || this._cssflex) {
      	    	        hgh = (zk.parseInt(hgh) || n.getClientRects()[0].height) - zk(n).padBorderHeight();
      
      	    	        if (hgh) {
      	    	          hgh -= this._headHgh(0);
      	    	          if (hgh < 0) hgh = 0;
      	    	          var sz = 0;
      
      	    	          l_out: for (var h, j = 0, rl = rows.length; j < rl; ++sz, ++j) {
      	    	            //next visible row
      	    	            var r;
      
      	    	            for (;; ++j) {
      	    	              //no need to check length again
      	    	              if (j >= rl) break l_out;
      	    	              r = rows[j];
      	    	              if (zk(r).isVisible()) break;
      	    	            }
      
      	    	            var $r = zk(r);
      	    	            h = $r.offsetTop() + $r.offsetHeight();
      
      	    	            if (h >= hgh) {
      	    	              if (h > hgh + 2) ++sz; //experimental
      
      	    	              break;
      	    	            }
      	    	          }
      
      	    	          sz = Math.ceil(sz && h ? hgh * sz / h : hgh / this._headHgh(20));
      
      	    	          this._visibleRows(sz);
      
      	    	          hgh -= this.efoot ? this.efoot.offsetHeight : 0; //bug# 3036398: frozen scrollbar disappear when listbox with vflex="1"
      
      	    	          hgh -= this.efrozen && this._nativebar ? this.efrozen.offsetHeight : 0;
      	    	          this.ebody.style.height = (hgh < 0 ? 0 : hgh) + 'px';
      	    	          return; //done
      	    	        }
      	    	      }
      
      	    	      var nVisiRows = 0,
      	    	          nRows = this.getRows(),
      	    	          lastVisiRow,
      	    	          firstVisiRow,
      	    	          midVisiRow;
      
      	    	      for (var j = 0, rl = rows.length; j < rl; ++j) {
      	    	        //tree might collapse some items
      	    	        var r = rows[j];
      
      	    	        if (zk(r).isVisible()) {
      	    	          ++nVisiRows;
      	    	          if (!firstVisiRow) firstVisiRow = r;
      
      	    	          if (nRows === nVisiRows) {
      	    	            midVisiRow = r;
      	    	            break; //nVisiRows and lastVisiRow useful only if nRows is larger,
      	    	            //so ok to break here
      	    	          }
      
      	    	          lastVisiRow = r;
      	    	        }
      	    	      }
      
      	    	      hgh = 0;
      	    	      var diff = 2;
      	    	      /*experiment*/
      
      	    	      if (!nRows) {
      	    	        if (this.isVflex()) {
      	    	          hgh = this._vflexSize(n.style.height);
      
      	    	          if (zk.ie < 11 && this._cachehgh != hgh) {
      	    	            hgh -= 1; // need to display the bottom border.
      
      	    	            this._cachehgh = hgh;
      	    	          }
      
      	    	          if (hgh < 25) hgh = 25;
      	    	          var rowhgh = firstVisiRow ? zk(firstVisiRow).offsetHeight() : null;
      	    	          if (!rowhgh) rowhgh = this._headHgh(20);
      	    	          nRows = Math.round((hgh - diff) / rowhgh);
      	    	        }
      
      	    	        this._visibleRows(nRows);
      	    	      }
      
      	    	      if (nRows) {
      	    	        if (!hgh) {
      	    	          if (!nVisiRows) {
      	    	            hgh = this._headHgh(20, true) * nRows;
      	    	          } else if (nRows <= nVisiRows) {
      	    	            var $midVisiRow = zk(midVisiRow);
      	    	            hgh = $midVisiRow.offsetTop() + $midVisiRow.offsetHeight();
      	    	          } else {
      	    	            var $lastVisiRow = zk(lastVisiRow);
      	    	            hgh = $lastVisiRow.offsetTop() + $lastVisiRow.offsetHeight();
      	    	            hgh = Math.ceil(nRows * hgh / nVisiRows);
      	    	          }
      	    	        }
      
      	    	        this.ebody.style.height = hgh + 'px';
      	    	      } else {
      	    	        this.ebody.style.height = '';
      	    	        var focusEL = this.$n('a');
      	    	        if ((this.paging || this._paginal) && focusEL) focusEL.style.top = '0px'; // Bug ZK-1715: focus has no chance to sync if don't select item after changing page.
      	    	      }
      	    	    }
      	     });
      	});
      ]]></script>

      Attachments

        Activity

          People

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

            Dates

              Created:
              Updated: