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

A combobox popup displays at an unexpected position

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 7.0.3, 8.0.0
    • Fix Version/s: 7.0.7, 8.0.1
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None
    • gh.sprint.customfield.default.name:
      ZK 7.0.7

      Description

      steps to reproduce

      1. 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>
        
      2. scroll down to the last combobox
      3. click to open its popup

      result

      the popup displays above the combobox

      expected result

      the popup displays below the combobox

      debug info

      1. if we scroll down a little (keeping popup open), the popup goes below the combobox
      2. 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

        Attachments

          Activity

            People

            • Assignee:
              DevChu DevChu
              Reporter:
              hawk hawk
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h