Widget to put small images in line with text

NeilPennanen_dnr — Wed, 29 Jun 2022 15:11:51 GMT

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?

Re: Widget to put small images in line with text

MackenzieCope — Tue, 05 Jul 2022 22:33:58 GMT

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.

topic Widget to put small images in line with text in ArcGIS Experience Builder Questions

Widget to put small images in line with text

Re: Widget to put small images in line with text