Responsive layour for an iframe element

ionic-v1
1

Hi I’m trying to change size of iframe element On Ionic modal.This is my code on controller to calculate screen width and height and then trying to adapt size of iframe container accordingly.

$scope.Math = $window.Math;
$scope.w = $window.innerWidth*9;
$scope.h=$window.innerHeight*16;
$scope.d=$scope.Math.min($scope.w,$scope.h);
if ($scope.d==$scope.w){

    $scope.w=$window.innerWidth-10;
    $scope.h=$scope.w*9/16;
}
else {

    $scope.h=$window.innerHeight-10;
    $scope.w=$scope.h*16/9;
}

$scope.widthModal=$scope.w+"px!important";
$scope.heightModal=$scope.h+"px!important";

I’m not able to bind this returned style to iframe element on view template. I tried jQuery lite but it throws some error and doesn’t work. Is there some way to make iframe element resposive by this method?

Could you please have a look @mhartington

Any help would be highly appreciated.

Thank you

2

Could you throw together a codepen?

3

Hi @mhartington,

I just wrapped the general way of calculating screen width in Javascript and adjusting DOM element size into Angular way.

Trying this code (jQLite) on controllers doesn’t work:

$document.getElementById('my1').style.width = $scope.w+"px";
$document.getElementById('my1').style.height = $scope.h+"px";

Maybe this is not right approach to update element style from controllers? You could use it on any element and experiment with it.

Thank you.