Details
-
Bug
-
Resolution: Unresolved
-
Normal
-
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>