topic Pop-up boxes on web app in ArcGIS Online Questions

Pop-up boxes on web app

VictoriaBoelman — Tue, 22 Mar 2022 20:50:16 GMT

I have the exact same problem as this: https://community.esri.com/t5/arcgis-web-appbuilder-questions/web-app-pop-ups-issue/m-p/555992#M14744

I can see the solution but I'm afraid I don't follow where to implement it. How/where do I change this embed code?! I'm a novice ArcGis user and worried about breaking something!

Even on my laptop it splits to the mobile version and I am putting my map live for a conference tomorrow! I've embedded the app into a storymap: https://storymaps.arcgis.com/stories/9a04d4975fd84019967f6a1b05822be2

Any ideas on how to improve/sort my pop-up box problem would be much appreciated.

Thanks,

Victoria

Re: Pop-up boxes on web app

Katie_Clark — Tue, 22 Mar 2022 21:32:42 GMT

Hi Victoria!

So, I hadn't actually done this before but I took a look at the original post you linked to and I believe I understand. When you created your story map, you chose "embed" and then provided the URL to your web app in this field, correct?

So, instead of just posting a plain URL, enter the code that is mentioned in the solution to the original post.

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Map Title" src="FULL URL OF MY WEB APP MAP&mobileBreakPoint=100"></iframe></div>

Where the URL of your web app goes where the red text is. The "Map Title" text I highlighted in blue can also be changed to be descriptive of your web map.

Give that a try, I hope it helps!

- Katherine

Re: Pop-up boxes on web app

VictoriaBoelman — Wed, 23 Mar 2022 11:08:29 GMT

Thank you! That seems to have helped 🙂