Full-screen embedded maps appear behind header. Help?

[Anonymous User]

I have an experience builder site with several embedded web maps. When the user selects the full-screen option, the map expands to full screen, but it gets tucked behind the header. This makes it impossible to see and/or click the buttons at the top of the web map. My organization standardizes the layouts of the maps, so I really don't want to move the buttons as a workaround. The header is pinned to the top of the page so it stays there when the user scrolls through the site.

I've played around with everything, but I can't seem to correct it. Is there a way to fix this? Thanks.

[TonghuiMing]

@Anonymous User 

According to the above descriptions, I assume that the header you mentioned is not the page header option inside ExB. The full-screen option is from the map itself or a grid layout? But the scroll behavior also indicates a scrolling page is evolved.

Could you help provide more details or a sample app instead? Difficult to imagine the layouts merely based on descriptions.

[MichaelGaiggEsri]

I agree with the other response, it's hard to help you without knowing more about your site structure (outline) and the components you've used. I just created a test experience with a scrolling page. I enabled the header,  added a button to the header and made it sticky ("pinned to top"). When I put map in maximize mode, the map takes up the full screen without the header (or any other component) to shine through or be on top.

[MackenzieCope]

Hello! I have run into this same issue and can describe what I've seen. From my testing, it seems that the issue occurs only on responsive screens (tablet, mobile)? The fullscreen map option works fine on a desktop screen for me.

When I select full screen on my map with a sticky header on a tablet testing environment, the header does not go away and is on top of the top section of the map, making the map controls inaccessible. I've attached screenshots showing a normal ipad view of the map and then fullscreen.

[MichaelGaiggEsri]

Thank you for your response. I was able to reproduce the issue on mobile resolutions, this appears to be a bug in the product and I'll forward to the product team.

[TonghuiMing]

@MackenzieCope Thanks for the screenshots. Telling from those, I assume this has something to do with a grid layout + Map widget fullscreen function.

I want to create an app with a similar layout but am not able to reproduce the actual thing. Anyone could share a reproducible app? Thanks.

[MackenzieCope]

@TonghuiMing I was able to reproduce the issue on a simple scrolling page with a map in a row element. In the tablet/mobile testing environment, using the fullscreen option on the map, the header stays and covers up the top portion of the map. This doesn't happen on a desktop testing environment.

Try it here: https://experience.arcgis.com/experience/53420c45c903430285743c8ebe99d693/

Header settings: