Extra spaces in pop up

I am storing two instances of images one Thumnail and one large.

While showing on show page, I am showing Thumbnail and once clicked on Thumbnail, pop up gets opened and it shows large image in pop up.

In case large image is not there, pop up should show thumbnail.

But while showing thumbnail in pop up extra white spaces are getting displyed.

But for large images, it works fine.

Please advice how should I remove extra white spaces from pop up while showing thumbnail image.

Thanks and Regards,

Suraj Borade

Hi Suraj!

I didn't try to replicate, but I'm pretty sure it's related to the Popup CSS that probably has a minimum width, something like 200px or close to it.

You should be able to inspect the element using the browser developer tools and override that value.

Let me know if you need help doing it :)

Hi Dinis,

I did that and noticed that if my image width is less than 250px, pop up width is becoming 193 px automatically but I am not getting way for overriding that pop up width by image width. Please help.

Thanks and Regards,

Suraj Borade

I just tried and also saw that, the code of the Popup does that automatically and I couldn't override it to "auto" because iframes default to 300px, meaning that you still have a larger popup than needed.

Any chance you can give a min-width to the image instead? From a UX perspective, a popup with an image smaller than 200px isn't very good, so, you would solve two problems at the same time I'd say.

My regards

Hi Dinis,

There are no chances that I can give min-width to Image and I cannot remove the pop up as well.

Thanks a lot.

Not sure if this is like the same behaviour in the popups of mobile apps, but try putting the margins or paddings to 0px in css. 

First, inspect the element in Chrome Developer Tools in the Computed tab. The box should gives you an indication if its padding/margin.
I removed white spaces around class ".popup-dialog" in this way. Look also in the base theme to find out where it happens and then override it later.

Hope this helps.