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

Web App pop-ups issue

TheodoreF

Hi all,

I have a web app on AGOL which uses one of the provided basemaps and a simple point vector layer. The pop up boxes on the app look great!:

But when this map is embedded into our website, everything still looks great apart from the pop up boxes which change to some nasty 90s style box! what gives?

Clicking the > button on the pop up leads to the whole web app being taken up by the pop up box!:

Thanks,

Theo

Find more posts tagged with

Accepted answers

TheodoreF

Ah ok so all I had to do was add this to the end of my web map URL: &mobileBreakPoint=100

'100' being the amount of pixels the map width has to be before it switches to mobile mode with mobile pop ups. I believe the default is 600. So change it to whatever you want.

So my final embedded code is:

Now I'm getting the normal 'desktop' pop-ups on my embedded map.

All comments

TheodoreF

How can I make a webapp map display in mobile mode (with all the mobile functionalities) on a phone or tablet BUT still retain the desktop style pop-up boxes?

SneadPrasad

I would highly suggest going with a minimum value of 400 for &mobileBreakPoint, otherwise, your users on mobile devices are going to have a poor experience with your pretty desktop map. By setting that value at 100 none of the template's mobile functionality enhancements will kick in until the screen width is 100px wide (which will never happen).

TheodoreF

Ah ok so all I had to do was add this to the end of my web map URL: &mobileBreakPoint=100

'100' being the amount of pixels the map width has to be before it switches to mobile mode with mobile pop ups. I believe the default is 600. So change it to whatever you want.

So my final embedded code is:

Now I'm getting the normal 'desktop' pop-ups on my embedded map.

TheodoreF

Hi Robert,

So looking at the code for the embedded map, there is no text referring to- mobileBreakPoint=<pixel number>

Where do I change the setting?

Thanks

TheodoreF

Hi Robert,

Thanks for clearing this up! I'll look into this and get back to you.

Theo

rscheitlin

Theo,

The issue you are running into is that your embedded app is at the size where WAB switches to using the mobile popup. So to workaround this you can define the WAB mobileBreakpoints to force the use of the desktop popup instead.

Use URL parameters—Web AppBuilder for ArcGIS | ArcGIS

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.