Create Scrollable Text with Inline Images in a Widget

[KatherineHackett]

Hello, I found this application on the ESRI gallery and I am trying to something similar to their map info widget. They have images in line with the text like "website". The widget also scrolls.

How do I:

1. Have images and text nicely beside each other that stay in place regardless of screen size. Is this using the px versus % ?

2. Make the whole widget scrollable.

Since you cannot add text to an image widget, or an image to a text widget, I am guessing they put text and images into a card widget. But I cant figure out how they got them to scroll together. 

I have tried using a grid within a card widget, but then each element scrolls separately. 

Any suggestions? Thanks. 
Here is the application link: Power Plants and Community Demographics (arcgis.com)

KatherineHackett_0-1705103380481.png

[ShengdiZhang · Accepted solution]

Hi @KatherineHackett ,

The sample app uses an Embed widget (Embed by Code):

ShengdiZhang_0-1705305965241.png

You can combine column, card, and text widgets to make a similar effect.

geonet.gif

 

1. Add an empty card widget in the widget controller

2. Add a column widget in the card

3. Add a card widget (with image and text), and a text widget (set with Auto height) in the column

4. For the image and text widgets in the card, use px for both position and width

ShengdiZhang_1-1705306565808.png

5. Duplicate card and text widgets to use the same style

Let me know if you have any other questions.

Shengdi

[KatherineHackett]

That worked! Thanks so much!

[DickieRigdon]

@ShengdiZhang Is it possible to give a little more detail to your workflow? Not able to generate the same look currently. Thank you.

[ShengdiZhang]

HI @DickieRigdon ,

I created a sample template to explain the settings: https://www.arcgis.com/home/item.html?id=b9f0018f65424e27827a059595083da9

Once logged in, you should see the “Create Web Experience” button:

ShengdiZhang_0-1727234547341.png

You can then see the details of the settings I used.

Please let me know if you have trouble accessing this template.

Regards,

Shengdi

[JV_]

Hello, I was wondering if is possible to scroll only the text inside the card image, since my text is longer than the size box I have available, is that possible?

[JanetSilb_Spike]

I have a similar question to @JV_ . I am looking for a way to scroll text within a text widget that's within a View in a Section in a Window.  This Window holds the set of instructions for using my WebX.  I tried the card solution for @KatherineHackett  above but couldn't get it to work. It seems like there should be a simpler way to scroll text.