How to create two buttons that stick to the bottom?

1 
<ion-view title="Welcome to Oneder">
<ion-content>
</ion-content>
<div class="row bar bar-footer">
    <div class="col">
        <a href="#/login" class="button button-assertive button-block">SIGN IN</a>
    </div>
    <div class="col">
        <a href="#/signup" class="button button-dark button-block">SIGN UP</a>
    </div>
</div>

I tried to use the above code to achieve two buttons that sit at the bottom of the page, but it only shows up-half of those 2 buttons. Any idea?
Thanks
Bo

2

I don’t know what do you mean by half.

But you can write your own css to do the work.

Simply as:

.footer {
   position:fixed;
   bottom:0;
   height:50px;
}

This will make the sticky effect.

If button is not showing, problem may be related to css “z-index” problems, if you don’t know what I am talking about, I suggest you to have a look at some basic css selection info because sometimes we really need to override or even hack some of the css code provided by ionic.css.

3

By “half”, I mean only of the buttom disappears. Adding your method gave the same behavior, but if I change the bottom:0 to 5%, it works. Thanks a lot ! but I still don’t know why bottom:0 will not show the whole div

1 Like