nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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)

Find more posts tagged with

ArcGIS Online

Accepted answers

Shengdi Zhang

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

All comments

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.

Instructions Window.jpg

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?

Shengdi Zhang

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

DickieRigdon

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

KatherineHackett

That worked! Thanks so much!

Shengdi Zhang

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.