Bottom fixed content (not ion-footer-bar)

ionic-v1
1

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

HTML:

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

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!

1 Like
2

Did you figure this out? I have the same requirement.

3

Not yet actually, I redesigned my stuff to circumvent my problem…

4

You will have to keep the fixed content out of the ion-content. As far as I know, anything in the ion-content will scroll.

6 Likes
5

Good suggestion. That is how I solved it.

Here is an example:

<ion-view title="Testr" hide-nav-bar="true">
    <ion-content class="padding">
      <p>Hello, World!</p>
    </ion-content>

    <!-- align to the bottom of the page -->
    <div style="position: absolute; bottom: 0px; width: 100%">
        <div style="text-align: center">
          <p>Bottom</p>
        </div>
    </div>
</ion-view>
11 Likes
6

Could mess up stuff in landscape mode ? since there is no scrolling ?

7

Could mess up stuff in landscape mode ? since there is no scrolling ?

8

That is a good observation. Thanks.

9

I’m not very knowledgeable about css, but for some reason the position attribute being set to absolute prevents the map from rendering. Instead this was my solution, using margin-top:

<ion-content>

</ion-content>
<div style="margin-top: 100%">
     <map center="90, -90" zoom="12">
     </map>
</div>
10

Your coment resolved my problem.

1 Like
11

I think that there is a solution to that problem, without having divs outside the ion-content and also be responsive. I’m using flexbox and different css base on the orientation.

In “Portrait” there are 2 divs. One occupies the top half of the screen and the other occupies the bottom half of the screen. If you want to make the top half larger then create a new class and put flex: 2 1 auto; (that will increase the
size of the top div)

In “landscape”, one div occupies the left half and the other occupies the right half.

So the html is the following:

<ion-view view-title="Example">
    <ion-content scroll="false">
        <section class="examle03FlexContainer border01">
            <div class="example03FlexItems back03">
                1
            </div>
            <div class="example03FlexItems back04">
                2
            </div>
        </section>
    </ion-content>
</ion-view>

And the css is the following

/* portrait */
@media screen and (orientation:portrait) {
    .examle03FlexContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .example03FlexItems {
        flex: 1 1 auto;
    }
}

/* landscape */
@media screen and (orientation:landscape) {
    .examle03FlexContainer {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .example03FlexItems {
        flex: 1 1 auto;
    }
}

.border01 {
    border: 4px solid #bb1515;
}

.back03 {
    background-color: #433e90;
    color: #c0c0c0;
}

.back04 {
    background-color: #2a334f;
    color: white;
}
12

I implemented a similar layout but I have issues when the keyboard shows up that hides the input textfield.

It happens that if I remove scroll=“false” from ion-content the content adjusts to focus the input field, but then my layout is not aligned bottom anymore.

Does this happen to anyone else?

13

not necessarily if you use <ion-content scroll="false" >

14

This work perfectly!! THANKS a LOT!!!

15

When keyboard changes over different inputs, it kinda glitches.

16

Work for me, Thank you!