Fill content height


#1

I spent few hours looking for a solution to fill an element with 100% height and no solution for this. So I wrote this directive that could help.

<ion-content>
    <div fill-content>
</ion-content>

.directive('fillContent', function ($ionicScrollDelegate) {
return {
    link: function ($scope, element, attrs)
    {
        element.ready(function () {
            element[0].style.height = $ionicScrollDelegate.getScrollView().__clientHeight + 'px';
        });   
    }
};});

#2

Nice one :smile: congratulation, I will move it to tutorials section


#3

i would prefer a directive direct on the ion-content or on an parent element which provides the values to the child scopes:

you ca replace offsetHeight with clientHeight… as you want.

In that way you could add a watcher to the elements height and width --> and recalculate the height and width --> and with ng-style all other elements get resized automatically :wink:


#4

Nice update… I will upgrade my code like you said. Thank you.