I’m upgrading a functioning app from v3 to v4.
I’ve been trying to change the height of the components to no avail. I suspect what I need to do is add a CSS4 variable in the variables.scss file for the particular page I’m targeting, such as:
app-name-of-specific-page{
–ion-button-height: 100px;
}
but that doesn’t seem to work, specifically because I can’t find the default height variable. (–ion-button-height is a shot in the dark. I can’t find any documentation on that)
I see in the html itself that the button height is controlled by a the .button-native class… but I can’t seem to override it in the app-name-of-specific.page.scss file (even with !important.) However, if I change the default value for height in the browser [it defaults to var(–height);] It has an effect.
Here are some screenshots from the browser:
I’d like to make the below buttons taller
the HTML
the CSS properties of the button class
UPDATE:
In the button properties, I see that --height is defined as shown below:
So… where does that get it’s value? In v3, this would be the sass variable overrides… but what/where is it for CSS4?
2 Likes
There’s an example of custom buttons here: https://github.com/ionic-team/ionic/blob/master/core/src/components/button/test/standalone/index.html
<ion-button class="round">rounded</ion-button>
.round {
--width: 60px;
--height: 60px;
--border-radius: 50%;
--vertical-align: middle;
--padding-start: 10px;
--padding-end: 10px;
}
This can be added where you want it in your app, but if you plan on changing all ion-button elements we recommend setting it globally, such as here: https://github.com/ionic-team/ionic-conference-app/blob/master/src/theme/variables.scss
All of the available custom properties for button can be found here: https://github.com/ionic-team/ionic/tree/master/core/src/components/button#css-custom-properties
This will be in the API documentation soon, but it was recently added and hasn’t been updated to reflect.
I’m currently working on updating the theming documentation. More documentation on updating CSS variables will be here: https://beta.ionicframework.com/docs/theming/css-variables
3 Likes
You are awesome. Thank you so much for your help. Just so the next guy doesn’t struggle after me… basically, the problem in my “Mypage.page.scss” file was that I used:.
.custom-button-class{
height: 100px;
}
instead of
.custom-buton-class{
–height:100px;
}
Thanks for the push in the right direction brandyshea. (and awesome work on ionic 4! it’s a little daunting at first to make the leap, but I can see that it fixes a lot of customizaiton problems!
1 Like
I used the example that you provided for the class=“round” button, and it works perfectly for changes in height, but not width. Reading the documentation you provided makes it seem like it should change the width… but it doesn’t.
From what I can tell, the width can be changed by the --padding-end and --padding-start variables, but since that depends on the width of the button text, it would be a rough to establish a standard width for a group of buttons that aren’t block or full. Is there a straightforward way to set the width?
Hmmm, I’m able to see the --width property updating the button. Could you provide the markup you’re using? If you’re using block or full it will take up 100% of the width as that is a property of that attribute.
so… I started from scratch with:
ionic start button_test blank --type=angular
and only modified these files:
- home.page.html:
<ion-header>
<ion-toolbar>
<ion-title>scratch</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button class="round">rounded</ion-button>
<ion-button class="round">rounded</ion-button>
</ion-content>
- home.page.scss
.round {
--width: 100px;
--height: 180px;
}
running ionic serve gives me:
So, the height is definitely affected… but not the width.
And anticipating your next question… ionic info gives me:
Ionic:
ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.7
@angular-devkit/core : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/ng-toolkit : 1.0.8
@ionic/schematics-angular : 1.0.6
Cordova:
cordova (Cordova CLI) : not installed
Cordova Platforms : not available
Cordova Plugins : not available
System:
Android SDK Tools : 26.1.1 (/Users/williamterrill/Library/Android/sdk/)
ios-deploy : 1.9.2
NodeJS : v8.11.1 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000
Ah, sorry! I just added --width a week ago (see https://github.com/ionic-team/ionic/commit/3af43610bb7dd949eedac7c731df435caa5c0d97).
It should be in the 4.0.0-beta.8 release, could you try updating to that?
npm i @ionic/angular@4.0.0-beta.8
1 Like
Yup! That did the trick! Thank you very much!
1 Like
How can we get the text below icon in button ? Ive a image in button icon as follows:
<ion-button *ngIf="groups[i].type!=1" class="round" [routerLink]="['/', 'group', groups[i].id]" color="{{(groups[i].state)?'primary':'light'}}" fill="solid" expand="block" size="large" >
<ion-icon slot="start" src="assets/imgs/{{groups[i].type}}.svg" class=""></ion-icon>
<span class="">{{groups[i].name}}</span>
</ion-button>
i want label of button to be below image icon. currently its coming inline.
Right now you’ll need to wrap the inner content in a div and style that:
<ion-button fill="solid" expand="block" size="large" class="vertical">
<div class="vertical">
<ion-icon slot="start" name="call"></ion-icon>
<span class="">Button</span>
</div>
</ion-button>
.vertical {
display: flex;
flex-direction: column;
align-items: center;
}
Codepen example: https://codepen.io/brandyscarney/pen/ZZaWGz
There is also an issue open to add this as a slot: https://github.com/ionic-team/ionic/issues/17782
Thanks a lot for your reply. I already did that and added
tag. but your solution worked without br. so i combined both together.
.sqare_button {
height: 80px;
--vertical-align: middle;
--padding-start: 10px;
--padding-end: 10px;
--ripple-color: darkcyan;
--padding-bottom: 2px !important;
--box-shadow: none;
}
.vertical {
display: flex;
flex-direction: column;
align-items: center;
line-height: 30px;
}
<ion-button fill="solid" expand="block" size="large" class="sqare_button">
<div class="vertical">
<ion-icon slot="start" name="call"></ion-icon>
<span class="">Button</span>
</div>
</ion-button>
I also needed button height to be more.
Thanks again!
1 Like
And this is how it looks now! 
3 Likes
can i get an example code of this !??
