jquery-focuspoint icon indicating copy to clipboard operation
jquery-focuspoint copied to clipboard

Padding messing up image positioning

Open rctneil opened this issue 8 years ago • 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.

rctneil avatar Mar 30 '17 10:03 rctneil

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.

jonom avatar Mar 30 '17 17:03 jonom

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.

erikagiroux avatar Mar 30 '17 17:03 erikagiroux

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

jonom avatar Mar 30 '17 17:03 jonom