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

Padding messing up image positioning #55

Open
rctneil opened this issue Mar 30, 2017 · 3 comments
Open

Padding messing up image positioning #55

rctneil opened this issue Mar 30, 2017 · 3 comments

Comments

@rctneil
Copy link

rctneil commented Mar 30, 2017

Hey,

Just been testing this out on a new site and my image wrapper that I am calling focuspoint on has top and bottom padding. This padding seems to be interfering with Focuspoint and causing the focuspoint of the image to be much higher in the container area.

Is there a way to fix this without removing the padding? I can't set a static height to the container though.

Thankyou.

@jonom
Copy link
Owner

jonom commented Mar 30, 2017

You could try putting an extra div inside the container that has the padding on it, then set it to position: absolute with 100% width and height, and call focuspoint on that instead? Would need position: relative (or fixed) on the container with padding too.

@erikagiroux
Copy link

I've noticed this problem too and I usually add an extra div as a workaround like you said but it would be really easy to fix in the plugin.

changing

var containerW = $el.width();
var containerH = $el.height();

to

var containerW = $el.innerWidth();
var containerH = $el.innerHeight();

would include the padding in the container dimensions calculation and fix this problem.

I think it would make more sense too since the image inside uses absolute positioning, which causes it to ignore the padding.

@jonom
Copy link
Owner

jonom commented Mar 30, 2017

I think I might have already done this in the v2 branch. Try it out if you like

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

3 participants