CODEWITHSUNDEEP
ionic-framework
Matteo Piazza
Matteo Piazza

Reputation: 2502

Ionic framework and bottom fixed content

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 work.

HTML:

<ion-view hide-nav-bar="true">
<ion-content padding="true">

    <img class="logo" src="img/logo.jpeg" />

    <div class="login-form">
        <div class="list">
            <label class="item item-input light-text-input">
                <input type="text" placeholder="user" ng-model="user">
            </label>
            <label class="item item-input light-text-input">
                <input type="text" placeholder="password" ng-model="password">
            </label>
        </div>

        <div class="row">
            <div class="col">
                <button class="button button-block button-energized">Login</button>
            </div>
            <div class="col">
                <button class="button button-block button-positive">FB Login</button>
            </div>
        </div>

        <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
    </div>

</ion-content>

I would like to set as "fixed" the div.login-form.

Using the following CSS does not work:

{
    position: fixed;
    bottom: 20px;
}

Also, with position:fixed input texts seem no more editable.

In Ionic, is it possible to fix part of the content to bottom? Thx!

Upvotes: 16

Views: 72675

Answers (7)

Ezequiel Garc&#237;a
Ezequiel Garc&#237;a

Reputation: 2776

actually i am using the version Ionic 2.0.0 i resolve with this code 

<ion-fixed class="fixed">
 <button fab fab-right fab-bottom>
   ${{ totalPrice }}
 </button>
</ion-fixed>

in your File Scss 

.fixed {
 bottom: 50px;
 right: 10px;
}

Upvotes: -1

isherwood
isherwood

Reputation: 61056

I ended up more or less circumventing Ionic's intentions and using a flex box layout:

<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
    <div class="flex-head"> ... </div>
    <div class="flex-body flex-1"> ... </div>
    <div class="flex-foot"> ... </div>
</ion-view>

The SCSS, using Ionic's mixins, looks something like this:

.flex-wrapper {
    @include display-flex;
    @include flex-direction(column);
    ...
}

.flex-1 {
    @include flex(1);
    ...
}

Upvotes: 0

ridwan
ridwan

Reputation: 61

How about just using the default ionic tab bar and just change the height to auto or any px that you wishes. Just make sure you put the code below ion-content tag.

Code: 

<ion-content padding="true">
</ion-content>  
  <div class="tabs tabs-dark" style="height:auto;">
    <div class="row">
      <div class="col">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
          </label>
          <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password" >
          </label>
        </div>
        <div class="row">
          <div class="col">
            <button class="button button-block button-positive">LOGIN</button>                         
          </div>
        </div>
      </div>
    </div>
  </div>

Codepen example : http://codepen.io/ridwan/pen/JozeYK

Upvotes: 6

mhartington
mhartington

Reputation: 7025

You could use anythnig out the ion-content with a button inside of it.

Demo

  <ion-list>

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

    </ion-item>

  </ion-list>

</ion-content>

<div class="fixed-outside">
  <div class="row">
        <div class="col">
            <button class="button button-circle button-energized icon ion-log-in"></button>
        </div>
        <div class="col">
            <button class="button button-circle button-positive icon ion-social-facebook"></button>
        </div>
    </div>

    <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>
</div>

Upvotes: 36

Brandy Carney
Brandy Carney

Reputation: 1186

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

<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
  <ion-content padding="true" scroll="false">
    <ion-scroll scroll-height>
       Content to go above the form
    </ion-scroll>
    <div class="login-form">
      Login form
    </div>
  </ion-content>
</ion-view>

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();
      })
    }
  }
})

Upvotes: 5

Adam B.
Adam B.

Reputation: 231

all the elements which you want to have fixed in the bottom should be out of the ion-content. This is a working example:

<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
   <img class="logo" src="img/logo.jpeg" />
</ion-content>

<!-- align to the bottom of the page -->
  <div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
    <div class="list">
        <label class="item item-input light-text-input">
            <input type="text" placeholder="user" ng-model="user">
        </label>
        <label class="item item-input light-text-input">
            <input type="text" placeholder="password" ng-model="password">
        </label>
    </div>

    <div class="row">
        <div class="col">
            <button class="button button-block button-energized">Login</button>
        </div>
        <div class="col">
            <button class="button button-block button-positive">FB Login</button>
        </div>
    </div>

    <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
</div>

Upvotes: 4

user1706079
user1706079

Reputation: 46

I just find a simple solution, which works fine for me.

<ion-content>
    <ion-scroll style="height: 300px">
    <div style="height: 1000px">
        your scroll content
    </div>>
    </ion-scroll>
    <div>
        your fixed div, maybe a form
    </div>
</ion-content>

you can also refer to: http://ionicframework.com/docs/api/directive/ionScroll/

I hope it helps.

Upvotes: 2

Related Questions