Pop-ups on new Basic (Media Map) do not work in mobile

[RexTurgano]

I noticed that the Pop-ups on the new Basic (Media Map) do not work well in mobile. The positioning of the pop-ups is off as the pop-up title, dock, collapse, and close button/icons are cut-off from view. It also overlaps with other widget elements as well. Our map is here if you want to take a look.

[DanielFox1]

Hi @RexTurgano 

In the Instant App configuration have you looked into the following settings or tried floating pop ups instead of docking them? The fixed pop up location on its own when looking at the view in Portrait mode looks better. 

Reduce header height or make it collapsible. The static header may be pushing the pop-up off-screen. Consider:
• Reducing the header height.
• Making it collapsible or using a splash screen for intro content.
• Moving disclaimers or long text into a modal or info panel.

I hope this helps somewhat.

[RexTurgano]

Wow, thanks! This actually works really well, and I think better than before. Thanks so much!

[KellyHutchins]

We'll get this fixed in a future release of online. In the meantime you should be able to fix it by pasting the following into the Custom CSS box during the basic configuration. You'll find that setting in the Theme section. Let me know if this doesn't work for you because it may require some additional modifications. 

.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: 0;
    position: relative;
}

[RexTurgano]

Thanks Kelly, I will test this as well. Big thank you to the community!!!!

[ctalleygreenville]

Yes, I just ran into this today and have been trying to edit the custom css and couldn't find the correct combination of properties.  Both solutions provided here are useful.  I have a custom header and had to adjust the max height a bit in my initial testing.  

Thanks to everyone.