Pop-up boxes on web app

396
2
Jump to solution
03-22-2022 01:50 PM
VictoriaBoelman
New Contributor II

Hi

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#M1474...

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 

 

 

0 Kudos
1 Solution

Accepted Solutions
Katie_Clark
MVP Regular Contributor

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?

Katherine_Clark_0-1647984512129.png

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

 

Best,
Katie


“The goal is not simply to ‘work hard, play hard.’ The goal is to make our work and our play indistinguishable.”
- Simon Sinek

View solution in original post

2 Replies
Katie_Clark
MVP Regular Contributor

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?

Katherine_Clark_0-1647984512129.png

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

 

Best,
Katie


“The goal is not simply to ‘work hard, play hard.’ The goal is to make our work and our play indistinguishable.”
- Simon Sinek
VictoriaBoelman
New Contributor II

Thank you! That seems to have helped 🙂

0 Kudos