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
Solved! Go to Solution.
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
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
Thank you! That seems to have helped 🙂