Nahiduzzaman Rose Nahiduzzaman Rose - 22 days ago 12
AngularJS Question

How can i customize height of pull up footer in Ionic?

In this example, ion-pullup.js has been used, however this example works fine, but pull up footer covers whole window. I want the pull up footer to be half of the window height. How can i do this?

Check the codes below :

HTML:

<html ng-app="ionicApp">

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Ionic Template</title>

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.0/js/ionic.bundle.min.js"></script>
<script src="https://rawgit.com/arielfaur/ionic-pullup/master/dist/ion-pullup.js"></script>
</head>

<body ng-controller="MyCtrl">

<ion-header-bar>
<h1 class="title">Ionic Pullup sample 3</h1>
</ion-header-bar>

<ion-view class="has-header" padding="true">
<ion-content>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body item-stable">
<div>
You have <b>229</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
<ion-pull-up-footer class="bar-calm">
<div class="title" ion-pull-up-trigger>Tap me or drag me</div>
<ion-pull-up-handle width="120" height="15" icon-expand="ion-chevron-up" icon-collapse="ion-chevron-down" style="border-radius: 5px 5px 0 0">
</ion-pull-up-handle>
<ion-pull-up-content scroll="false">
<div class="list card">
<div class="item item-divider">Other Updates</div>
<div class="item item-body">
<div>
There was a fire in <b>sector 13</b>
</div>
</div>
</div> </ion-pull-up-content>
</ion-pull-up-footer>
</ion-view>
</body>

</html>


JS:

angular.module('ionicApp', ['ionic', 'ionic-pullup'])

.controller('MyCtrl', function($scope) {

});

Answer

You can use max-height to set the maxmial height tof the footer.

<ion-pull-up-footer  max-height="200" class="bar-calm">

I can't help you, if you want change this value dinamically. But i think that it should be possible. But maybe a fix value is enough for your requirements.

By the way: it's really useful to have a runing plunker or codepen sample!!!