Bottom div in

Question

I have a ionic (first version) app. i have a problem when implement a div in the bottom when the class scroll is automatically active.

I have this stucture:

<ion-view>
    <ion-nav-title>Ionic test</ion-nav-title>
    <ion-content>
        <div style="background-color: red; height: 200px;"></div>
        <div class="bar bar-footer bar-balanced">
            <div class="title">Footer</div>
        </div>
    </ion-content>
</ion-view>

I tried to position absolute with bottom 0 but din't work.

But the div is never in the bottom

Thanks!

score 0 · Answer 1 · answered Aug 09 '16 at 22:59

0

Try using <ion-footer> rather than a custom class: http://ionicframework.com/docs/components/#footer

answered Aug 09 '16 at 22:59

amuramoto

2,838
1
11
15

I have the same problem :( I did a print screen: http://prntscr.com/c3qq16 – user2209728 Aug 09 '16 at 23:26

Tomislav Stankovic · Answer 2 · 2016-08-16T16:52:42.610

1. option - footer always on screen.

Add class="has-footer" to <ion-content> and instead of

<div class="bar bar-footer bar-balanced">
            <div class="title">Footer</div>
        </div>

use

<ion-footer-bar align-title="center" class="bar-balanced">
  <h1 class="title">Footer</h1>  
</ion-footer-bar>

like this:

<ion-view>
    <ion-nav-title>Ionic test</ion-nav-title>
    <ion-content class="has-footer">
    <div style="background-color: red; height: 200px;"></div>
</ion-content>
<ion-footer-bar align-title="center" class="bar-balanced">
  <h1 class="title">Footer</h1>  
</ion-footer-bar>
</ion-view>

2. option - footer appears only when the scroll is active (used codepen).

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

.directive('stickyFooter', function($document) {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var footer = $document[0].querySelector('.stickyFooter');
      var content, height, reverse, x;
      $element.bind('scroll', function(e) {
        content = $document[0].querySelector('.scroll-content').offsetHeight;
        height = $document[0].querySelector('.scroll').offsetHeight;
        reverse = -footer.offsetHeight;
        x = height + reverse - e.detail.scrollTop - content;
        if (x>reverse && x<=0) {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,'+x+'px,0)';
        } else if (x<=reverse) {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,'+reverse+',0)';
        } else {
          footer.style[ionic.CSS.TRANSFORM] = 'translate3d(0,0,0)';
        }
        // console.log(e.detail.scrollTop);
      });
    }
  }
})

.controller('MyCtrl', function($scope, $document, $ionicPosition) {
  
  $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 }
  ];
  
});

p { 
  padding: 20px !important; }
.stickyFooter {
  padding: 20px;
  width: 100%;
  background: grey;
  bottom: -60px;
  position: absolute; 
  
  -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 10s; /* Firefox < 16 */
        -ms-animation: fadein 10s; /* Internet Explorer */
         -o-animation: fadein 10s; /* Opera < 12.1 */
            animation: fadein 10s;

}
ion-content[sticky-footer] .scroll {
  padding-bottom: 60px; }

/ *FadeIN */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <div class="buttons">
      <h1 class="title">Ionic test</h1>
      </div>
    </ion-header-bar>

    <ion-content sticky-footer scroll-event-interval="1">
      
      <p>This is some data.</p>
      
      <ion-list>

        <ion-item ng-repeat="item in items" item="item">
          Item {{ item.id }}
        </ion-item>

      </ion-list>

    </ion-content>
      
    <!-- Here's the stiky footer -->
      
    <div class="stickyFooter">Footer.</div>
      
  </body>
</html>

Thank you for your answer. That's it. But I wanted footer div to be 20px down and when did scroll appear. Now, it is always fixed and visible. — user2209728, Aug 10 '16 at 17:11
@user2209728 Something like this http://codepen.io/xAlien95/pen/PwbPdr ? — Tomislav Stankovic, Aug 10 '16 at 17:58
That´s it :) But with 4 item you have a problem with the footer. http://codepen.io/anon/pen/LkrWdv But with fadein and fade out. Is it possible? — user2209728, Aug 10 '16 at 19:40
@user2209728 In this example the footer appears only when the scroll is active. If you do not have enough data scroll will be inactive. Even with 4 items, if you resize window scroll will become active and footer will show up. — Tomislav Stankovic, Aug 10 '16 at 20:12
Hi Tomislav, I implemented this solution. But still it doesn't work well. For example: - window with 320x568 - Red box: 400px when i do scroll, footer div to appear and scroll stop at the end of this box. See my example: https://drive.google.com/open?id=0B-1hxV9Rk2cadkxCVmNndTlhWHM — user2209728, Aug 11 '16 at 03:10

Bottom div in

2 Answers2