Select to view content in your preferred language

Dynamically Adjust Text Size depending on Screen Size

134
3
Jump to solution
a week ago
KeonMonroe
New Contributor III

Hello - I am building an map application with Experience Builder in ArcGIS Online. Currently I have the map's title text as size 10px so that the text can be accommodated on a mobile device. This is not ideal when testing on desktop.

Is there any way currently in Experience Builder to dynamically size adjust the text's size based on the screen size? Either through the text widget or some other method? What I imagine is a way to for example set the text size to 28px by default in desktop view, and by enabling some option the component would dynamically scale the size based on the screen. Is this possible?

Screenshot 2024-07-16 125534.png

Screenshot 2024-07-16 125514.png

  

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

As suggested by @Ke_Xu, you can use the Pending List to switch out different Text Widgets for different size screens.

Another option is to set your text size to vw. By clicking the px on the text size, you can switch the units. Vw means visual width. Using this option every character will be a percentage of the width of the screen and it will scale to any screen size.

JeffreyThompson2_0-1721242197058.png

You may want to do a combination of both methods.

GIS Developer
City of Arlington, Texas

View solution in original post

3 Replies
Ke_Xu
by Esri Contributor
Esri Contributor

Hi KeonMonroe,

We will consider your needs. Now you could use pending to solve this issue. Video is here. https://community.esri.com/t5/arcgis-experience-builder-videos/three-tips-for-working-with-the-pendi...

JeffreyThompson2
MVP Regular Contributor

As suggested by @Ke_Xu, you can use the Pending List to switch out different Text Widgets for different size screens.

Another option is to set your text size to vw. By clicking the px on the text size, you can switch the units. Vw means visual width. Using this option every character will be a percentage of the width of the screen and it will scale to any screen size.

JeffreyThompson2_0-1721242197058.png

You may want to do a combination of both methods.

GIS Developer
City of Arlington, Texas
KeonMonroe
New Contributor III

I was not aware of the visual width setting! It would be nice if this was an option present in all components, not just the text box - but it works for now! Thank you!

0 Kudos