IonButton with multiple Lines vertically

Ionic Framework
1

Hello,

I am at the end of my tether and look for some suggestion. :blush:

I try to create an IonButton with multiple (in my case 2) lines. An IonButton is created as display: flex, with a span wit5h class .button-inner. This class defines a fixed flex-flow: row and needs to be changed to flex-flow: column in order to display correctly:

IonButton
IonButton493×165 11.9 KB

As there is no appropriate CSS Custom Property I searched for a solution.

This solution does not work (any more).

.button-inner {
    flex-flow: column;
}

I guess this is because Ionic buttons use CSS shadow parts now, that cannot be modify directly.

So I tried

ion-button::part(native) .button-inner {
    flex-flow: column;
}

But this doesn’t work either, because ::part() does not allow to select inside of it.

Any suggestion on how to solve that problem?

2

I think you just need to set white-space: normal as documented :slight_smile:

3

ion-text-wrap, or white-space: normal only breaks “bigger”/“longer” button labels. But my button usually has short text, but still must be two-lined.

E.g.
Line 1: D
Line 2: 100

4

Obviously you could just use a <br> tag between to force a second line but guessing you don’t want to do that.

Otherwise, you can do something like this. Using span to follow proper HTML spec of not having a block level element within an inline element (the span with the button-inner class).

<ion-button>
  <span style="display: flex; flex-direction: column">
    <span>D</span>
    <span>100</span>
  </span>
</ion-button>
1 Like
5

In fact, this works. :blush: Thanks.

I concentrated too much on the standard Ionic interface of using the available button-inner…

1 Like