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)

[ShengdiZhang · Accepted solution]

Hi @KatherineHackett ,

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

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

 

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

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:

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?