Menu
I 'm using iframe to display the contents using angularjs with ionic framework. Here, I need to give window height as iframe height, so I have used
$scope.iframeHeight = window.innerHeight;
But, I am getting 1/4th screen only.
Here what I tried so far.
index.html
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<!-- ionic/angularjs CSS -->
<link href="css/ionic.css" rel="stylesheet">
<link href="css/ionic-custom.css" rel="stylesheet">
<!-- ionic/angularjs js bundle -->
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.iframeHeight = window.innerHeight;
});
</script>
</head>
<body ng-controller="MainCtrl">
<iframe src="http://stackoverflow.com" ng-style="{height:iFrameHeight}" id="iframeid" width="100%" ></iframe>
</body>
</html>
Am I missing something?
740
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
Main problem: you need to add 'px' units to window.innerHeight number. And the second one, variable name is iframeHeight not iFrameHeight. Fixed expression will look like:
ng-style="{height: iframeHeight + 'px'}"
Demo: http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
