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

errorbox incorrect overlap(detection/avoidance)

XMLWordPrintable

    • ZK 9.0.1 S1

      Steps to Reproduce

      <zk>
          <div height="500px" width="400px" style="border:1px solid red; overflow-y: scroll">
              <div height="200px">0px</div>
              <div height="200px" width="300px" style="background-color: lightcoral">200px</div>
              <div height="200px">
                	<separator height="5px"/>
                	405px <textbox width="150px" constraint="no empty"/>
              </div>
              <div height="200px">600px</div>
          </div>
      </zk>
      

      1) scroll down a bit (less than 200px, the red box should still be fully visible)
      2) focus - blur the textbox
      3) click the red box

      Current Result

      the errorbox is moved to an incorrect position

      Expected Result

      the errorbox should only move if the clicked/focussed element is overlapped by the error box

      Debug Information

      Errobox._uncover method uses zk(...).cmOffset which doesn't take scroll positions into account

      Workaround

      patched _uncover function

          zk.afterLoad('zul.inp', function() {
          	var xErrorbox = {};
              zk.override(zul.inp.Errorbox.prototype, xErrorbox, {
                  _uncover : function(el) {
                      var elofs = zk(el).revisedOffset(),              /*patched*/
                          node = this.$n(),
                          nodeofs = zk(node).revisedOffset();          /*patched*/
      
                      if (jq.isOverlapped(
                      elofs, [el.offsetWidth, el.offsetHeight],
                      nodeofs, [node.offsetWidth, node.offsetHeight])) {
                          var parent = this.parent.$n(), y;
                          var ptofs = zk(parent).revisedOffset(),      /*patched*/
                              pthgh = parent.offsetHeight,
                              ptbtm = ptofs[1] + pthgh;
                          y = elofs[1] + el.offsetHeight <= ptbtm ? ptbtm : ptofs[1] - node.offsetHeight;
                              //we compare bottom because default is located below
      
                          var ofs = zk(node).toStyleOffset(0, y);
                          node.style.top = ofs[1] + 'px';
                          this._fixarrow();
                      }
                  }
          	});//zk.override
          });//zk.afterLoad
      

            Leon03 Leon03
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Remaining Estimate - 4 hours
                4h
                Logged:
                Time Spent - Not Specified
                Not Specified