Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

offsetParent with padding problem #218

Closed
Nauss opened this issue Jan 14, 2017 · 2 comments
Closed

offsetParent with padding problem #218

Nauss opened this issue Jan 14, 2017 · 2 comments

Comments

@Nauss
Copy link

Nauss commented Jan 14, 2017

Using the offsetParent option and setting padding the parent makes the right drag limit wrong (it looks like its padding-left + padding-right).
Reproducing the bug on the demo is easy, just open the dev tools and set the padding to the container with scrollbars.

Setting only the left padding 'works' (in this case, the right padding must not be set and is the same as left...).

Maybe I missed something ?

@Nauss
Copy link
Author

Nauss commented Feb 16, 2017

Unfortunately, I don't have access to a Linux for now so I can't create the PR.
But I found the bug in positionFns.es6:

// Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
    bounds = {
      left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) +
            int(nodeStyle.borderLeftWidth) + int(nodeStyle.marginLeft),
      top: -node.offsetTop + int(boundNodeStyle.paddingTop) +
            int(nodeStyle.borderTopWidth) + int(nodeStyle.marginTop),
      right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft,
      bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop
    };

Despite the comment, the bug is here:

  • padding is added to left and top, this is good
  • innerWidth() and innerHeight() functions remove both left, top and right, bottom paddings, this is not good

So the fix would be something like this here:

right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft - int(boundNodeStyle.paddingRight),
bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop - int(boundNodeStyle.paddingBottom)

I also suggest adding paddings to this box in the example, like so:

<div style={{height: '1000px', width: '1000px', paddingTop: '10px', paddingLeft: '20px', paddingRigth: '30px', paddingBottom: '40px'}}>

It would be nice if someone could create a PR for this before I get my hands to a Linux ;)

@STRML STRML closed this as completed in 1106007 Mar 6, 2017
@Nauss
Copy link
Author

Nauss commented Apr 25, 2017

Nice, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant