I've tried three different ways to get this iframe / map to fill the viewport and the viewport alone:
- html "iframe" scrolling options are not supported by html 5
- css "style" declarations (see code) aren't working as I am implementing them.
- 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
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>
Best Answer
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: