How to create two buttons that stick to the bottom?

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

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?


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

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

Simply as:

.footer {

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.


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