Bottom fixed content (not ion-footer-bar)

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

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

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

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.

7 Likes

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

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

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

That is a good observation. Thanks.

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>

Your coment resolved my problem.

1 Like

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

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?

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

This work perfectly!! THANKS a LOT!!!

When keyboard changes over different inputs, it kinda glitches.

Work for me, Thank you!