When displaying an image in an HTML component, the image width can never grow beyond the screen width, even when explicitly sized or if the HTML component has horizontal scrolling enabled. try this large image on for size, the mobile app editor will show the image full size (and support scrolling if horizontal scrolling is enabled), but the mobile app will always resize the image.
I tried a number of things to attempt to force the image to resize properly, but nothing worked. even more strange is when there is a non-image block that is very wide as it scrolls no problem while the image still remains screen width.
<img src="https://picsum.photos/seed/picsum/1400/900" />
<p>Bacon ipsum dolor amet chislic ground round pork belly leberkas ribeye landjaeger salami meatball short loin. Corned beef buffalo ham hock kielbasa jowl shank tongue. Pig turkey short loin beef chislic sausage buffalo turducken pork belly bacon ball tip doner. Flank ham hock pastrami beef ribs swine drumstick, boudin frankfurter landjaeger short ribs sirloin. Landjaeger pancetta ham hock tongue brisket jowl shankle jerky alcatra frankfurter ball tip. Chicken doner boudin, pork loin short loin rump beef ham bacon ground round.</p>
All I really want to do is be able to click on a scaled down image in a list and open an HTML view where the image is full size so that all the text in the image is readable without any scale down. the HTML component seemed like the only option, but turns out that this doesn't seem possible at all.
A lot of things get stripped in the html component. Not everything is supported. But it’s not documented. I had a similar issue but with other elements and attributes:
It seems that flexbox is supported. So perhaps you can add a div of the same size in the html component as the image. And then add the image in there with width=“100%” ?
You did try the width attribute on the img tag I presume?
You’ll have to try a lot of things before you get something exactly right and even then in might not be possible. Perhaps someone from Retool knows if width on img is supported or a workaround.
The fact that there’s no documentation on what is supported makes it very difficult to find a solution.
Great catch on this funky behavior! I just tested out a mobile app with your example img inside a div with scrolling enabled. On a desktop in preview and deploy it scrolled but view via mobile app it resized to shrink the image and does not scroll.
I can file a bug report for this so our mobile eng team can take a look at this
@Steven_W I agree that we can improve our documentation on how mobile handles HTML components and in line CSS properties.I can file a report to that to our docs team. Let me know if there are any other areas around mobile besides HTML/CSS handling that I an ask the team to add more documentation on
I also tested with width=100% and unfortunately that did not change anything
