CODEWITHSUNDEEP
buttonionic-frameworkalignment
supriya chauhan
supriya chauhan

Reputation: 319

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.

Upvotes: 1

Views: 3904

Answers (2)

Alex Ljamin
Alex Ljamin

Reputation: 767

Another approach will be to use Ionic CSS utilities and do not touch app.scss at all.

<ion-footer class="ion-no-padding ion-no-margin">
  <ion-button class="ion-no-margin" block color="Dark" (click)="pushPage()">Explore</ion-button>
</ion-footer>

Upvotes: 1

Sabari
Sabari

Reputation: 1981

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

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

Upvotes: 2

Related Questions