steps to reproduce
- load the zul below
<div id="root" > <separator height="100px"/> <combobox > <comboitem label="Simple and Rich" /> <comboitem label="Cool!" /> <comboitem label="Thumbs Up!" /> </combobox> fully scroll down to see combobox <div height="1000px"/> Open popup, popup is displayed above combobox instead of below. Then if we scroll down a little (keeping popup open), the popup goes below the combobox <combobox > <comboitem label="Simple and Rich" /> <comboitem label="Cool!" /> <comboitem label="Thumbs Up!" /> </combobox> <div height="350px"/> </div>
- scroll down to the last combobox
- click to open its popup
result
the popup displays above the combobox
expected result
the popup displays below the combobox
debug info
- if we scroll down a little (keeping popup open), the popup goes below the combobox
- The issue happens since 7.0.3, and 7.0.2 doesn't have such issue.
workaround
<script><![CDATA[ zk.afterLoad('zul.inp', function() { var old = {}; zk.override(zul.inp.ComboWidget.prototype, old,{ open: function (opts) { if (this._open) return; this._open = true; if (opts && opts.focus) this.focus(); var pp = this.getPopupNode_(), inp = this.getInputNode(); if (!pp) return; this.setFloating_(true, {node:pp}); zWatch.fire('onFloatUp', this); //notify all var topZIndex = this.setTopmost(); var ppofs = this.getPopupSize_(pp); pp.style.width = ppofs[0]; pp.style.height = 'auto'; pp.style.zIndex = topZIndex > 0 ? topZIndex : 1 ; //on-top of everything var pp2 = this.getPopupNode_(true); if (pp2) pp2.style.width = pp2.style.height = 'auto'; pp.style.position = 'absolute'; //just in case pp.style.display = 'block'; // throw out pp.style.visibility = 'hidden'; pp.style.left = '-10000px'; //FF: Bug 1486840 //IE: Bug 1766244 (after specifying position:relative to grid/tree/listbox) //NOTE: since the parent/child relation is changed, new listitem //must be inserted into the popup (by use of uuid!child) rather //than invalidate!! var $pp = zk(pp); $pp.makeVParent(); zWatch.fireDown('onVParent', this); // B50-ZK-859: need to carry out min size here if (this.presize_()) ppofs = this.getPopupSize_(pp); // throw in pp.style.left = ''; this._fixsz(ppofs);//fix size // given init position $pp.position(inp, 'after_start'); this._shallSyncPopupPosition = false; // B65-ZK-1588: bandbox popup should drop up // when the space between the bandbox and the bottom of browser is not enough var top = jq(pp).offset().top + (zk.chrome ? 1 : 0), // chrome alignement issue: -1px margin-top realtop = zk.ie == 10 ? Math.round(top) : top, after = jq(inp).offset().top + zk(inp).offsetHeight(), realafter = zk.ie == 10 ? Math.round(after) : after; if (realtop < realafter) { $pp.position(inp, 'before_start'); this._shallSyncPopupPosition = true; } pp.style.display = 'none'; pp.style.visibility = ''; this.slideDown_(pp); //FF issue: //If both horz and vert scrollbar are visible: //a row might be hidden by the horz bar. if (zk.gecko) { var rows = pp2 ? pp2.rows: null; if (rows) { var gap = pp.offsetHeight - pp.clientHeight; if (gap > 10 && pp.offsetHeight < 150) { //scrollbar var hgh = 0; for (var j = rows.length; j--;) hgh += rows[j].offsetHeight; pp.style.height = (hgh + 20) + 'px'; //add the height of scrollbar (18 is an experimental number) } } } if (!this._shadow) this._shadow = new zk.eff.Shadow(pp, {left: -4, right: 4, top: -2, bottom: 3}); if (opts && opts.sendOnOpen) this.fire('onOpen', {open:true, value: inp.value}, {rtags: {onOpen: 1}}); //add extra CSS class for easy customize jq(pp).addClass(this.$s('open')); }, }); }); ]]> </script>
revert the commit https://github.com/zkoss/zk/commit/9dc2b35ecc168320d995948475b2a7f31b9d0676 for ComboWidget.js 08/22/2014 10:43AM