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="https://community.esri.com/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 );
}
} );
</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=f4c8ec20ff7d462dbc66e207c..."></iframe>
</div>
</body>
</html>
