0

I've tried three different ways to get this iframe / map to fill the viewport and the viewport alone:

  1. html "iframe" scrolling options are not supported by html 5
  2. css "style" declarations (see code) aren't working as I am implementing them.
  3. javascript code (see code) isn't working as I am implementing it.

I got the bits of code from other stack exchange posts, researched them and attempted to apply them as seen below, with no results whatsoever. I'm sure it's just my lack of understanding how and where to apply these measures...

With the code, please note that I placed the javascript and the css where I thought they might go, and both are in the sample code just to illustrate what they are. I TRIED SEVERAL CONFIGURATIONS - -- - drawing a complete blank.

The page can be viewed here

screenshot

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>
  • I just fixed the link, it works now. I'll throw in a screenshot if that helps, but as I explained, the issue is, I want the map to fill the whole browser window, so people don't have to scroll to get to the bottom of it. When it is opened on a mobile device it should automatically fill the device window - Other versions of this map do that fine - it's just that I don't know how to get an embed container or iframe or whatever it is to automatically fill the browser frame. – Edward Curran Jun 2 '17 at 0:38
  • I'd say this isn't directly related to ArcGIS Online or even GIS - it's due to hosting the map inside an iFrame. Have you looked at stackoverflow.com/questions/819416/… ? – Stephen Lead Jun 2 '17 at 3:57
  • Well, it involves a map :) - I tried it, results in the edited post. – Edward Curran Jun 2 '17 at 17:56
  • if the mouse is hovering over the map it will zoom in/out like it should. if the mouse it not over the map it scrolls the page. why dont you make the size of the frame smaller so users can se the boarder of the webpage for scrolling the page up and down – NULL.Dude Jun 2 '17 at 19:24
  • I tried resizing the iframe - if you scan through the code I put up in the post you'll see it in the head section. What I would like here are suggestions as re. what code might work better, or how to better implement the code I'm trying to use. – Edward Curran Jun 3 '17 at 18:54
1

In case anyone has this same particular question, after way too much searching around and trying a bunch of redundant solutions, I managed to get the iframe to do what I wanted it to do by removing the .embed container div and everything related to it, so there was only the basic html code and the iframe. Here's what it looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Portland Cycle Safety Map</title>
    <link rel="icon" href="/icons/cog.svg">

    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }

        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;    
        }
    </style>
   </head>

  <body>

   <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>

  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.