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; } } }

Views Navigation arrow missing for small screen sizes in Experience Builder

AndrewWelsh

I am building an experience app using Views Navigation where I have a different map for each view. I am using Views Navigation to simulate a tabbed layout where you can choose a tab to view different maps (like in a map series story map).

I have run into a problem however in that the overflow arrow to help you scroll horizontally through the views (tabs) is missing for small screen size setups (e.g. 360 x 640)...It is there for the other sizes but not the small size which would be how people view the app on their phones.

I want to check to make sure I am not missing a simple setting and/or to confirm this is a bug. Any ideas on this would be greatly appreciated!

Cheers

Andrew

Najděte více příspěvků označených jako

ArcGIS Online

Accepted answers

TonghuiMing

Hi @AndrewWelsh

Visually in the builder/mobile mode, you will not see the arrow icon; however, the user experience is different than that of desktop/tablet - users will use a finger scroll directly. That's why it is designed to utilize another way to achieve a better experience (on mobile devices the icon might be too small to find & click).

You can try it on the actual phone (or a browser simulator), and it will look like this (this is the same with the Menu widget as well):

2023-12-07_15-31-29.mp4

CreditRepeatProblem.PNG

All comments

mwartman_grey

I've added this to the ArcGIS Experience Builder Ideas board:

https://community.esri.com/t5/arcgis-experience-builder-ideas/display-views-navigation-arrows-on-the-small/idi-p/1695532

Hopefully the ESRI app developers will reverse their design choice, or at least give users the option to toggle the arrows for small screens.

TonghuiMing

Hi @dcrGIS_asimm, Thanks for bringing this up. Do you have a screenshot to help me better understand your scenario - is it a Menu widget or the Views Nav widget? And when you say the header, I assume it is the page header enabled with a Menu widget added to it?

dcrGIS_asimm

Hi @TonghuiMing,

I just wanted to note in this thread that I have seen some users miss other headers on mobile devices since there are no visual cues to let them know there are more headers to select. It would be nice if there was a visual cue to let users know in what direction there are more headers.

This is to say, users would still use a finger scroll directly but small indicator arrows could cue the existence and direction of other headers without being clickable just like in StoryMaps.

AndrewWelsh

Thank you @TonghuiMing, much appreciated!

TonghuiMing

Hi @AndrewWelsh

You can try it on the actual phone (or a browser simulator), and it will look like this (this is the same with the Menu widget as well):

2023-12-07_15-31-29.mp4

CreditRepeatProblem.PNG

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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