I have an ionic template that looks like this:
<ion-view title="{{doc.title}}">
<ion-content has-header="true" padding="false" direction="xy" class="main_content">
<ion-scroll has-header="true" padding="false" direction="xy" zooming="true" min-zoom="1" max-zoom="3">
<img ng-src='{{frameSrc}}' class='displaycontent'>
</ion-scroll>
</ion-content>
</ion-view>
In order for 'ion-scroll' to function correctly, it needs to have a smaller width / height than its content (in this case, the contained image). (Ionic scrolling horizontally and vertically)
So I would like to resize 'ion-scroll' to be the same size as the 'ion-content' container. By specifying this size, scrolling then functions as it should.
Specifying "100%" for the width and height of 'ion-scroll' doesn't work for scrolling; the value needs to be explicitly set in pixels.
So I need to fetch the correct width and height of 'ion-content'.
I have tried using jQuery:
$('.main_content').height()
If I run this jQuery function in the console, the correct value is returned...but in the script (placed within the relevant view controller) it differs.
I'm guessing this is to do with how the compilation/directive process works in Angular/Ionic. But being new to this framework, I'm not sure what to do.
Any ideas would be appreciated.
I'm assuming you are unable to set the width and height inline like the second comment in the link you posted. Would this work?
$(function () {
var imgW = $(".displaycontent").width();
var imgH = $(".displaycontent").height();
$(".main_content").css({
"width": imgW / 2 + "px",
"height": imgH / 2 + "px";
});
});