Ionic framework and bottom fixed content

Question

I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not wor

Answer 1

You could use a directive to calculate the height of the form. It will recalculate on window resize. I haven't tested navigating away from the page.

Codepen

Relevant HTML

  
    
       Content to go above the form
    
    

      Login form
    
  

CSS

.scroll-content {
  position: relative;
}

div.login-form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

Directive

.directive('scrollHeight', function($window) {
  return {
    link: function(scope, element, attrs) {
      scope.onResize = function() {
        var winHeight = $window.innerHeight;
        var form = angular.element(document.querySelector('.login-form'))[0];
        var formHeight = form.scrollHeight;
        var scrollHeight = winHeight - formHeight;

        element.css("height", scrollHeight + "px");
      }
      scope.onResize();

      angular.element($window).bind('resize', function() {
        scope.onResize();
      })
    }
  }
})