Issue
I'm having trouble changing the size of my ion-button in Ionic 4. This same code used to work in the previous version, Ionic 3. I've modified my width and height of the button, but nothing works.
All that shows is the standard ion-button with an unchanged height/width.
page.scss
.button {
display: table;
margin: 0 auto;
border-radius: 4px;
margin-top: 27px;
.login {
font-family: $font;
letter-spacing: 2px;
width: 280px;
height: 50px;
display: block;
border-radius: 4px;
}
}
page.html
<div class="button"><ion-button class="login" (click)="login(oldUser)">LOGIN</ion-button></div>
Solution
You can find example on github for custom buttons.
I can provide a snippet:
<ion-button class="round">rounded</ion-button>
.round {
--width: 60px;
--height: 60px;
--border-radius: 50%;
--vertical-align: middle;
--padding-start: 10px;
--padding-end: 10px;
}
You can add it where you want in your app, this is done using CSS4.
If you plan on changing all ion-button
consider doing so globally.
Check here for Available custom control properties.
Answered By - Barr J
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.