Padding messing up image positioning
rctneil opened this issue · 3 comments
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.
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.
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.
I think I might have already done this in the v2 branch. Try it out if you like