Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

When data-vertical-position is bottom, then the popup is not positioned correctly #580

Closed
yannickm95 opened this issue May 31, 2023 · 0 comments

Comments

@yannickm95
Copy link
Contributor

if you choose data-vertical-position with bottom property the popup is not positioned correctly.

  script.setAttribute('data-horizontal-position', 'right');
  script.setAttribute('data-vertical-position', 'bottom');

If you set these properties you get this:

Screenshot 2023-05-31 at 16 54 09

The fix would be to take the parent's height into account as well when button.offsetTop is used to position the element as we start from bottom to position instead of top in inlcudes.js:

  var popupSetDimensions = function popupSetDimensions(button, popup) {
    var px = button.offsetTop - 1,
      // position next to the button we clicked
      windowHeight = window.innerHeight,
-     maxHeight = windowHeight - px - 40; // make sure the popup doesn't extend below the fold
+     maxHeight = windowHeight - px - 40, // make sure the popup doesn't extend below the fold
+     pxVertical = options.renderVerticalPosition === 'bottom' ? button.offsetParent.clientHeight - 21 - px : px;

-   popup.style[options.renderVerticalPosition] = "".concat(px, "px");
+   popup.style[options.renderVerticalPosition] = "".concat(pxVertical, "px");
    popup.style.maxHeight = "".concat(maxHeight, "px");
    popup.style[options.renderHorizontalPosition] = "".concat(
      button.offsetWidth - 3,
      "px"
    ); // move left or right, based on config
  };

then would get this, which mimics the behaviour of top by aligning to the bottom of the button:

Screenshot 2023-05-31 at 17 03 00
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant