Widget to put small images in line with text

915
1
06-28-2022 07:00 AM
Labels (1)
NeilPennanen_dnr
New Contributor II

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:

NeilPennanen_dnr_0-1656420716111.png

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:

NeilPennanen_dnr_1-1656421010022.png

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?

1 Reply
MackenzieCope
New Contributor III

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. 

MackenzieCope_0-1657059909133.png

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.