Search code examples
angularjsionic-frameworkcss-positionfooter

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) {

});
Solution

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