Ionic V4 - How do you align text to left in ion-button

Ionic Framework ionic-v3
1

How do you align text to left in ion-button?
And how do you detail styling ion-button style in class .button-inner?
It used to be very easy to style components in ionic v3, but w/ v4 easy things become hard things.
No ::ion-deep, nor >>> , nor UnEncapsulation provided, but just decided to use shadow dom in a hurry, like a monkey.
No benefit gained but inconvenience everywhere

<ion-button expand="full" text-left>Full Button</ion-button>

Shouldn’t flexible be the first thing a component library should consider?

2

Good question, you’d think the built-in properties would work!

<ion-button " expand="full" type="submit">
   <span class="ion-text-left">Register</span>
</ion-button>

span.ion-text-left {
    margin-right: auto;
}
3 Likes
3

@IonicGeoff
Thanks for your quick response, yes, one more wrapper is the solution we used now.
However, is there any cleaner solutions? Because with a n-items list, n extra wrappers and traffics are required, and some hard coded styles are not changeable. Ways such as using ::ng-deep or Encapsulation.None we don’t need to add extra wrapper?
No extra javascript plugin plz…

4

I agree, “text-left” should be all that is needed to align text to the left. Maybe it’s a bug?

5

“text-left” is one of many scenarios, there are tons of styling requests that we cannot image one by one.
That’s why Google provides virtual code ::ng-deep while SHADOW COMPONENT is released.
It seems Ionic Team decided to use shadow without long think, because FLEXIBLE should be the first thing a UI component library should consider.

Finally, the best solution recommended here is to provide virtual code ::ion-deep for deep styling, and compiles styles inside ::ion-deep into <style>…</style>

6

As in this post?..

7

Thanks a log @IonicGeoff

8
Physics
I have used this code, i am unable to left the icon and text...Kindly resolve anyone... I am also facing