Content is overflowing outside the screen

Hey guys,

I’m using a Rich Text field here which is parsing HTML code.

As you can see in the image, my content is overflowing outside the viewport/screen. Is there a workaround to set a Max Width or something like a container to contain the area within which the data can be present??

This is the link to my app:
https://barbarous-salt-9152.glideapp.io/

FYI - but for sure it is used a lot so perhaps one of the other HTML using Gliders can help!

Oh! That’s too bad. I was really hoping there’d be a simple workaround.

1 Like

There might be. @Jeff_Hager or @Robert_Petitto?

Not sure, but you could try wrapping all of the html in a <div> tag with width set to 100%. I’m guessing one object in the html is wider or has a hard-set pixel width set, so it’s setting the overall width of all of the content on the entire page beyond the pixel width of the screen.

2 Likes

Hi there @Sharvan, I agree with @Jeff_Hager, one of the elements in your html code is too wide, probably your image.

Workarounds work fine until they don’t anymore. If I were you I would ignore workarounds. If a text component doesn’t support html, then it doesn’t support it. :slightly_smiling_face:

3 Likes

Plus I’ve read many times that HTML may stop working at anytime without notice (since it isn’t supported in the first place). So that’s a big risk you should consider…

1 Like

Thanks for your prompt response guys. Guess I’ll have to figure out a non-HTML way of doing it now. Will definitely let yall know how that goes. :grin:

3 Likes

That’s what I was going to suggest. I imagine the image was pulling the div past 100%.

2 Likes