Widget to put small images in line with text
I'm putting together a project in Experience Builder and trying to put text and images in the same line in the same widget.
This is in a window that is being used as the Splash Screen.
Right now I have text widget formatted so that a small image widget is right in place where I need it for an explanation, as shown here:
This works okay for the full screen desktop version where all of the text in the window can fit on one screen.
However, it becomes a problem when looking at the mobile version. There is too much content to fit on one screen length so a scroll bar is needed. Since I have two different widgets, scrolling down moves the text but the images stay in the same place and I have these weird misalignments where the images are in the wrong spots, taking them out of context:
Is there a way to smoothly embed small images into the text widget?
Or another widget I should be using where I can have images and text formatted side by side so that scrolling through the window results in both of them moving right along?
I don't know of any way to have in-line images within a text box. I don't think that's possible with ExB as of now.
I have run into something similar where I wanted to put an icon or image next to some text but have it still be somewhat dynamic as the screen sizes change. I ended up using a row within a column. Within the row I had an image taking up only the smallest column size. Then the column right next to it had the text taking up the rest of the space. I vertically centered both columns so no matter how long the text gets on smaller screen sizes, the image to the left is vertically centered. Then for a new item, you could add a new row underneath in the same main column and adjust any spacing column-wide. This isn't in-line images by any means, but it was my workaround for this similar issue.
I would probably recommend creating a static image with your images within the text and inserting it as a whole image instead. You could create a different static image for desktop, tablet, and mobile depending on your font sizes and container widths of different screen sizes so it behaves dynamically even though you did it manually. I did this with a legend in an app of ours and it's working well.
