ion-content resizing when loading data dynamically

Question

i have an ion-nav-view inside ion-content.

i want to load data dynamically into ion-nav-view.

when loading data dynamically into ion-nav-view its not resizing to content height instead its loading in a small div with a scroll bar.

<ion-view view-title="My view">
   <ion-content class="padding">
    <div id="test">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
     </div>
     <ion-nav-view name="mydynview">
     </ion-nav-view>
   <ion-content >
</ion-view >

i am loading a template into "mydynview" from my controller.

mytemplate.html:

 <ion-view view-title="About">

<ion-content class="padding" delegate-handle="testhandle">
<!-- <ion-nav-view> -->

    <p ng-click="onlc()">test</p>
    <p ng-click="onlc()">test</p>
    <p ng-click="onlc()">test</p>
    <p ng-click="onlc()">test</p>
    <p ng-click="onlc()">test</p>
<!-- </ion-nav-view> -->
</ion-content >

I read about resizing from here: http://ionicframework.com/docs/api/directive/ionContent/

and even that is not working.

help will be highly appreciated.

not a perfect solution: as $ionicScrollDelegate.resize() is not working, i have done it resizing on my own with js. var newHeight= $window.innerHeight; var tabsHeight = document.getElementById('HIPACIonTabs').style.height; document.getElementById('MyHIPACIonNavView').style.height= (newHeight-230)+'px'; //taking window innerHeight and subtracting footer height, footer is 49px — praveen seela
Hi @praveenseela - I posted an answer below with a means of diagnosing if your problem is being caused by a timing issue because of async calls. $ionicScrollDelegate.resize() does work, you just have to make sure to call it after the content has loaded. — jpoveda

jpoveda jpoveda · Accepted Answer · 2015-11-23T18:34:47

The documentation states that you need to call $ionicScrollDelegate.resize() "after the content has loaded."

Since you did not post your controller, it's not possible for me to evaluate if your calling the .resize() method before the load is asynchronously completed.

Here's a quick and dirty way for you to test if it's a timing issue: call $ionicScrollDelegate.resize() within a $timeout with a 500ms delay. If that fixes the problem, you're calling .resize() before the content has finished loading so it doesn't have the complete view to calculate the new size accurately. This isn't a solution; it's a way to diagnose the problem. If it turns out this is the problem, then you want to call .resize() on your promise / callback / whatever that gets fired when your template is done loading.

ion-content resizing when loading data dynamically

mytemplate.html:

1 Answers