Community

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

381
2
07-19-2023 01:26 PM
Amanda__Huber
by MVP Regular Contributor
MVP Regular Contributor
‎07-19-2023 01:26 PM

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: 

Amanda__Huber_0-1689798022909.png

 

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

 

2 Replies
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎07-19-2023 02:32 PM

@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. 

0 Kudos
Amanda__Huber
by MVP Regular Contributor
MVP Regular Contributor
‎07-20-2023 08:22 AM

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): 

Amanda__Huber_0-1689865054406.png


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

Amanda__Huber_1-1689865460691.png


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: 

Amanda__Huber_2-1689865917302.png

 

Mobile view for bookmark extent: 

Amanda__Huber_3-1689865972497.png

 

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

Thank you, 

Amanda Huber