ArcGIS Instant Apps-Bookmarks/Map Centering Issue On Mobile Devices

Question

Hello Instant Apps Team,

We recently noticed an issue with specifically the Sidebar Instant App. When viewing the application's configured bookmarks on a mobile device, the map centers behind the bookmark window. Because if this behavior, users are not able to see the area they just selected, this leads to user confusion/user error.

Screenshot of the issue:

In the screenshot above, the bookmark has been configured in the web map to show the entire parking area. When viewing it on a mobile device, the parking area is hidden behind the bookmark window.

Please resolve this issue as this impacts our current and future planned projects in this application.

Thank you,

Amanda Huber

Amanda.Huber@threeriversparks.org_trpd · Answer

Hi Kelly,

This is very helpful, thank you.

I'm curious, is this "by design"/intentional? Ideally our org tries to avoid customization/coding if possible. This makes our applications more sustainable and reduces the risk of custom code breaking the app if changes are made by the AGOL team in the future.

That being said, I was able to test your CSS and it does appear to help the centering issue but the extent of the map is still cropped from what the bookmarks should show.

Here's an example:

In desktop the bookmark will look like this- including the entire AOI (area of interest):

In mobile view it appears like this- the map extent/AOI is cropped/zoomed in.

The way the Web App Builder handles bookmarks is a great example for what we're looking for in the Sidebar Instant App. The Bookmark/AOI is not cropped, and the map is centered at the top of the screen (without custom CSS).

Here's an example of what that looks like below:

Desktop bookmark extent:

Mobile view for bookmark extent:

Can this be resolved/have an equivalency for bookmark behavior on mobile devices?

Thank you,

Amanda Huber

khutchins · Answer

@Amanda__Huber I think you can workaround this one using custom css. In the app configuration experience go to the Theme & Layout section then Theme and at the bottom of this section you'll see a Custom CSS option where you can add the following css.

.mobile-panel {
display: flex;
flex-direction: column;
position: unset;
}

Let me know if this approach will work for you.