Search code examples
buttonionic-frameworkalignment

How to set button to the bottom of the screen in ionic 2 application

Trying to fix a button to the bottom of the screen in ionic 2 application, but i don't know why it is taking a space after button. I have tried alot of method even have changes the main.css regarding the button, but not able to fix it. Please help, I want to stick it to the bottom with no spaceenter image description here.

Code i am using for: 

</ion-content>
<ion-footer no-padding style="margin:0rem 0rem!Important;">
  <button ion-button block color="Dark" (click)="pushPage()">Explore</button>
  </ion-footer>

<ion-footer> is kept outside of the <ion-content>, so as to make the button fixed on scrolling.Even on removing 'margin' and 'no-padding' no effect is found.

Solution

  • In app.scss(or in relative .scss) add the following code:

    .footer{
    button{
        margin-bottom: 0px;
    }
}