Ionic V4 align button contents (text, icon) left instead of center

Ionic Framework
1

ion-button contains a span with:
align-items: center;

I want a button that has width: 100%, but where the contents are aligned left.

However, because the span is under #shadow-root, I cannot simply put this into my global.scss:
.button-inner {
align-items: left;
}

I also don’t see a variable that is exposed for this. How can I achieve button contents to be aligned left?

Thanks!

2

Anyone have any ideas, please?

3

Have you managed to figure this out yet?

4

When i want to align something to the left, i use:

float:left; OR
padding-left: 0px; OR
left: 0px

Don´t know if your question is about something like this.

5

Thanks for the suggestion, but I am after aligning the text on the button. Not sure that will do the trick. I have managed to achieve it using a span inside the button however:

<ion-button><span>Menu</span></ion-button>

ion-button{
  span{
    text-align:left;
    width:100%;
  }
}
10 Likes