Full button in ion-footer

Ionic Framework ionic-v3
1

Hello there, guys!

I’m converting the following screen into Ionic:

56 PM
Screen Shot 2017-11-13 at 8.07.56 PM.png798×1390 31.4 KB

As you can see, there’s a blue button on the bottom that is full. But while applying a full button in ion-footer.ion-toolbar, I’m not getting the same result, as there’re some borders on it, just below “CHANGE PASSWORD” button:

31 PM
Screen Shot 2017-11-13 at 8.12.31 PM.jpg1004×1450 69 KB

This is the code snippet:

ion-content goes here...

<ion-footer no-border>
	<ion-toolbar transparent>
    <button ion-button full text-uppercase>Change Password</button>
	</ion-toolbar>
</ion-footer>

Does anybody have any idea of what is the proper way to remove these white borders?

Thanks in advance!

2

this is default padding added by ion-footer
so you have to remove padding/margin manually by applying css.
you can find default applied css by doing inspect in chrome and just remove it

3

You can try this in ionic v3.

 <ion-footer>	
    <button ion-button full text-uppercase no-margin>Change Password</button>
</ion-footer>