Skip to content

cloneposition incorrect with scrolled element in 1.7.3 #328

Description

@hoodie63

Our code worked fine in 1.7.2 - moved to 1.7.3 and our box comes up below the cloned element by the amount that the div is scrolled. Or to the right of the cloned element if scrolled horizontally.

The base element is a td in a table inside several divs. We have a reusable pop-up div that covers the display td to provide a drop-down choice.

Here's the call:

 Element.clonePosition( pup, element, {setWidth:false, setHeight:false,
                   offsetLeft:0, offsetTop:0} );

I went into 1.7.3 and remove the part that accounts for scrolling and it works again:

    if (options.setLeft)
      styles.left = (p[0] - delta[0] + options.offsetLeft) + 'px';
//was:      styles.left = (p[0] + pageXY.x - delta[0] + options.offsetLeft) + 'px';
    if (options.setTop)
      styles.top  = (p[1] - delta[1] + options.offsetTop)  + 'px';
//was:      styles.top  = (p[1] + pageXY.y - delta[1] + options.offsetTop)  + 'px';

Activity

  1. added this to the milestone on Mar 31, 2017
  2. rparada commented on Apr 21, 2021

    @rparada

    I had a similar problem. I upgraded from 1.7 to 1.7.3 and my div that was supposed to display below the text field where the user types displays at the bottom of the page. I fixed it by replacing the private function pageScrollXY() that the clonePosition() logic calls. The pageScrollXY() was changed from this:

        function pageScrollXY() {
          var x = 0, y = 0;
          if (Object.isNumber(window.pageXOffset)) {
            x = window.pageXOffset;
            y = window.pageYOffset;
          } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
          } else if (docEl && (docEl.scrollLeft || docEl.scrollTop)) {
            x = docEl.scrollLeft;
            y = docEl.scrollTop;
          }
          return { x: x, y: y };
        }

    to this:

        function pageScrollXY() {
          return { x: document.body.scrollLeft, y: document.body.scrollTop };
        }

    Now everything works fine. I tested on macOS on Safari, Microsoft Edge, Firefox, Chrome and Safari Technology Preview.

  3. kiatng commented on Oct 28, 2022

    @kiatng

    The fix in this commit 560bb59 works for me. This issue can be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions