Ionic4 ion-button width

Ionic Framework
1

Missing something obvious here…
How do I set the width of an ion-button to a specific number.

--height: 100px; works just fine.

2

Maybe not exactly your question but maybe the following will do the trick, there is an option expand="full" on the button to fit the width of its container

<ion-button expand="full">Click me</ion-button>
3

Ya, thanks but I was trying to avoid having to put the ion-button in a container just to make it a certain width.

4

maybe you could then submit a PR to add a css4 variable style the nested button size, I didn’t found one

but maybe I missed it or someone has a better idea

5

No rush here so I am going to let it hang out there for a while. Thanks though!

6

I am not sure why, but --height can’t really change the ion-button height.

i put in global.scss.

ion-button {
    --height: 100px;
}

No effect.

I am using “@ionic/angular”: “^4.0.0”.

Any idea?

7

Does it work for you when you put it in a page’s .scss?

8

In your scss page put this :

:host{
    ion-button{
        width : 40px;
    }
}
3 Likes