Nahiduzzaman Rose Nahiduzzaman Rose - 1 year ago 156
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 ng-app="ionicApp">

<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="" rel="stylesheet">
<script src=""></script>
<script src=""></script>

<body ng-controller="MyCtrl">

<h1 class="title">Ionic Pullup sample 3</h1>

<ion-view class="has-header" padding="true">
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body item-stable">
You have <b>229</b> meetings on your calendar tomorrow.
<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-content scroll="false">
<div class="list card">
<div class="item item-divider">Other Updates</div>
<div class="item item-body">
There was a fire in <b>sector 13</b>
</div> </ion-pull-up-content>



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

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


Answer Source

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!!!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download