Unwanted vertical scrollbar in image hotspot

Submitted by anikneogi on Thu, 01/12/2017 - 23:03
Forums: 
Content creation

Hi there,

I have an image hotspot as below.

                 +                                      +                                    +                                                         +

image also attached below

Sorry I had to indicate the hotpsots separately as I couldn't drag and insert the full image here.

Anyway, the image size is 1900 X 336 px. 

Each hotpspot is supposed to reveal another image of the same size covering the background. Example - the first hotspot image as below. Again, I couldn't drag and insert the full image here.

On my Moodle site and also on H5P, where I created it (I am not using the plugin), clicking on the hotspot reveals this image fine with a back button on the right (not in pic). This back button appears in a bar, which is fine, but underneath this bar, there appears to be another bar with two arrowheads - one on top and another in the bottom, like in a scrollbar. This 'scrollbar' does nothing except spoil the optics of this great interaction. What am I doing wrong? The image size (1900 X 336 px) is exactly the same as the iframe size (1900 X 336 px).

 

More information about Helen.

image also attached below

I have noticed that the sample image hotpsot on the H5P site does not have this issue. Definitely, I am doing something wrong? Any advice will be greatly appreciated.

Many thanks,

Anik

H5P file: 
Binary Data hotspot-characters-prototype-33684.h5p
Attachments: 
Image icon image hotspot main.PNG

anikneogi

Thu, 01/12/2017 - 23:08

Hi there,

Please note the correct size of the images and the iframe is 1090 X 336 px, not 1900 X 336 px unlike mentioned earlier. Apologies.

Thanks,

Anik

anikneogi

Fri, 01/13/2017 - 02:23

Hi,

Just wanted to update that the issue was resolved by reducing the image height slightly instead of keeping it the same as the iframe height.

Thanks,

Anik

icc's picture

icc

Fri, 01/13/2017 - 09:29

Hi! I'm glad you worked it out. I believe this can happen when the content scales it self to fit perfectly on the page – sometimes you can get fractional pixels. Also, the image "popup" have some spacing(padding) around the edge(~12px on H5P.org), this makes the aspect ratio of the image a tiny bit different from the backgrounid and may trigger a scrollbar in the "popup". 

So, the best thing to do, is what you did – play a bit around with the size of the image.

Thank you for sharing.