AnsweredAssumed Answered

How to embed an AGOL app on a website so the iframe fills the whole viewport?

Question asked by edward.curran15 on Jun 4, 2017

Hi. I'm embedding an AGOL app on a website, viewable here. I'd like to format the map so it fills the entire viewport, so it is not necessary to scroll down to the bottom of the page. HTML 5 does not support iframe declarations, and in the code you can see my attempts at altering the iframe through .css and .js.

 

I'm sure this is a very basic issue- any advice appreciated, thanks!

 

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="embed-container" content="width=device-width, initial-scale=1">
    <title>Portland Cycle Safety Map</title>
    <link rel="icon" href="/icons/cog.svg">
    
    <script type="application/javascript">

 

function resizeIFrameToFitContent( iFrame ) {

 

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

 

window.addEventListener('DOMContentLoaded', function(e) {
 
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );
</script>

 

    
    
    
    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }
       
        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            
        }
              
   .embed-container {position: relative;
        padding-bottom: 80%;
        height: 0;
        max-width: 100%;}
   .embed-container iframe, .embed-container object {position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;}
    small{position: absolute;
      z-index: 40;
      bottom: 0;
      margin-bottom: -15px;}          
        }   
   
   </style>
   
  </head>
  <body>
   <div class="embed-container">
   <iframe scrolling="no" width="100%" height="100%" margin-top="100px" title="Cyclist Danger Zones"
   src="http://orcommunitycolleges.maps.arcgis.com/apps/webappviewer/index.html?id=f4c8ec20ff7d462dbc66e207cb1f2cfc"></iframe>
   </div>
  </body>
</html>

Outcomes