Best Answer

HTML image editing

  • 9 January 2024
  • 8 replies
  • 78 views
K
Rank
Badge

Hello, I have used a GIF instead of an image on a widget but i dont know how to remove the white space at the bottom and also the scroll panel at the side. I have tried resizing but no luck, any ideas? 

 

icon

Best answer by Kelly 15 January 2024, 16:48

View original

8 replies

KMallette
Rank
Userlevel 7
Badge +5

@Kelly Are you resizing the .gif, or the widget? Making the widget min-height a bit taller should help with the scroll bar.  I’m not sure what would make the white space go away.

Do you need to use the .gif format (due to motion, etc.) or can you try a .jpg/.png format?

KMallette/Viasat, Inc.
T
Rank
Userlevel 4
Badge

I recently ran into this issue using the HTML widget to display a gif that was linked to another page within Docebo - in order to fix it, I had to use CSS.  It took me a long while to figure it out, but this is what eventually worked for me:

 

style.htmlwidget .content-img {

    max-width: 100%;

    height: 100%;

K
Rank
Badge

@KellyAre you resizing the .gif, or the widget? Making the widget min-height a bit taller should help with the scroll bar.  I’m not sure what would make the white space go away.

Do you need to use the .gif format (due to motion, etc.) or can you try a .jpg/.png format?

Thanks for this. I need the widget to also match the size of the others on the page. Yes, i need the motion of the GIF 

Bfarkas
Rank
Userlevel 7
Badge +3

Because of your need to set the widget to the same height, is the image itself set to the same size? Is the GIf the same size? scrolls show up when your content is larger than the container, so is it possible that the image has a gap space, even a transparent one underneath it not being accounted for? 

K
Rank
Badge

I recently ran into this issue using the HTML widget to display a gif that was linked to another page within Docebo - in order to fix it, I had to use CSS.  It took me a long while to figure it out, but this is what eventually worked for me:

 

style.htmlwidget .content-img {

    max-width: 100%;

    height: 100%;

This worked :)

N
Rank

I don’t know why this isn’t working for me!

I have a GIF in HTML because I want the image to link to a course catalog, but it has a scroll bar. If I set the widget height, it is no longer responsive to screen size.

I used this CSS in my brand configuration and it is still showing a scroll bar.

T
Rank
Userlevel 4
Badge

I don’t know why this isn’t working for me!

I have a GIF in HTML because I want the image to link to a course catalog, but it has a scroll bar. If I set the widget height, it is no longer responsive to screen size.

I used this CSS in my brand configuration and it is still showing a scroll bar.

I just looked at my widget set up.  I used this CSS, as mentioned, and did NOT include a widget height in my widget itself.

This was the coding I used for my HTML widget which was a 2/3 page widget I was trying to match height with an image widget:

<a href="TARGETPAGELINK" target="_blank" rel="noreferrer noopener"><img style="display:block;margin-left:auto;margin-right:auto;" src="GIFLINK" alt="ALTHOVERLANGUAGE" width="1000" height="482" /></a>

N
Rank

PUUUUURRRRRRRRRRFect! Like a cat birthday! Thank you! This worked! Beautiful.

Reply


Terms & ConditionsCookie settings