Change to Pop-up display in Instant Apps breaks functionality

JasperRomero

Hello,

I am creating a series of Web Apps using the Instant App builder for public engagement along urban walking trails. At various POIs along the trail, users can view pop-ups to read text, view images, click hyperlinks, etc.

The idea is that these Web Apps will be primarily used on cell phones.

The first trail was made about a year ago, and worked fine. Users could open the pop-up, interact with content, and close the pop-up in an identical manner to web browser use. However, after creating a new trail, we are finding that opening a Pop-up on mobile causes the pop-up to fill the whole mobile browser screen, with no exit button available. The only way to escape the pop-up is to refresh the page. This only occurs when the phone is held in portrait orientation - not an issue in landscape - but portrait orientation is the most conducive for using the App.

I am 100% sure that this was not an issue a year ago - the first App we published did not have this issue. Was something changed in the intervening year in how Web Apps display pop-ups? This issue breaks the functionality of the App pretty severely - users would have to constantly refresh the page and lose their progress along the walking trail. EDIT to add that the original map from last year now has this undesired behavior as well. ADDITIONAL EDIT to note that this (dys)functionality can be observed when selecting the Portrait View when Configuring the Web App from a computer browser - pop-ups fill the screen and cannot be exited.

I am fairly confident that the configuration of the Apps has not changed since the originally desired functionality was observed, but just in case, are there any settings I should check in the App configuration that might resolve this?

If not - is Esri aware of this behavior change that has degraded the functionality of Instant Apps?

KellyHutchins

Ok we have to move the top property down a bit so that it isn't behind the header and there was also a typo in the original css. Here's the revised css

.esri-view-width-xsmall .esri-popup--is-docked-top-center, .esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
    height: 100vh;
    max-height: calc(100vh - 50px);
   z-index:1000;
    bottom: 0;
    top: 50px;
    position: relative;
}

View solution in original post

VenkataKondepati

Yes, I’ve noticed this behavior shift in Instant Apps as well. Pop-ups in portrait view now expand to full screen with no close option, which wasn’t the case a year ago. It looks like a change in the mobile UX for Instant Apps rather than something you missed in configuration.

A couple of things to try/check:

Review the latest Instant App release notes (Esri has made UI/UX adjustments around pop-ups recently).
Test across different app templates (Map Viewer vs. Sidebar vs. Guided Tour, etc.) to see if it’s consistent.
Confirm whether it happens in both AGOL and Enterprise environments, since behavior sometimes differs.

If this is repeatable (and your older app now shows it too), it’s most likely a product update. I would recommend opening a case with Esri Support or adding your input to the Ideas/feedback channel so the product team is aware this breaks the mobile engagement workflow.

Curious if others in the community have a workaround—such as a template where pop-ups still behave like before.

Regards,
Venkat

KellyHutchins

Which instant app are you seeing this issue in? If its Basic/Media this is a known issue and we'll have a fix for it in the next release of ArcGIS Online. More details here: https://community.esri.com/t5/arcgis-instant-apps-questions/pop-ups-on-new-basic-media-map-do-not-wo...

JasperRomero

@VenkataKondepati thank you for weighing in - it's always reassuring to know that I'm not overlooking something simple.

@KellyHutchins it is a Media Map - thank you for the information. Is there a version of the custom CSS specification from that thread that might solve this problem, or should I just wait for the next Online release? (Also - is November a reasonable expectation for that release?)

KellyHutchins

Media and Basic are the same code behind the scenes so the CSS in that other thread should help. Let me know if its not working as you'd expect.

JasperRomero

I used the CSS code from that thread but still do not see the "Close" (x) button - new to CSS so not sure if there are ways to modify what's in that thread. The Web App is here:

https://santabarbara.maps.arcgis.com/apps/instant/basic/index.html?appid=b713492ef8b14777a64f6e0b776...

Happy to share owner access as well, if that would help with troubleshooting. We are in the middle of a public outreach week so if any quick fix is available that would be amazing! Thank you for the engagement on this.

KellyHutchins

Ok we have to move the top property down a bit so that it isn't behind the header and there was also a typo in the original css. Here's the revised css

.esri-view-width-xsmall .esri-popup--is-docked-top-center, .esri-view-width-xsmall .esri-popup--is-docked-bottom-center {
    height: 100vh;
    max-height: calc(100vh - 50px);
   z-index:1000;
    bottom: 0;
    top: 50px;
    position: relative;
}

JasperRomero

Thank you Kelly, that does the trick!

I will keep an eye on it, but would you guess that this will need revision after the next release of Online? Would the systematic fix result in this giving a strange display?

KellyHutchins

I think it will be ok after the release but I’ll do some testing and update this thread.