[Ionic 4] Style ion-button line-height in shadow DOM

[jacky-gds]

Hi there,
i’m trying to modify the line-height property of an element.

The fact is that it’s impossible for me to access that property on the ion-button shadow content.

      <ion-button class="my-button">
        <ion-ripple-effect></ion-ripple-effect>
        Hello
      </ion-button>

  ion-button{
    font-size: 15px;
    line-height: 20px !important;
    --line-height: 20px !important;

    &::slotted(*) {
      line-height: 20px !important;
    }

  }

None of the specified properties has work.

May anybody help?

Thanks,
Cheers

[Dovel]

Try this:

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

But I recommend to use the official way like size="large" attribute. And the ripple effect is automatically added when you use click or href.

See docs: https://ionicframework.com/docs/api/button

btw. you selected the tag ionic-v3 but your title and content is about “Ionic 4”.

[jacky-gds]

Ok thank my issue is on multiple line ion button with css, I created a class to allow ionic buttons to follow the new lines of a text or the button to accept text on multiple lines, by the following class:

  &.allowMultipleLines {
    text-overflow: inherit;
    white-space: inherit;
    height: auto;
    --padding-top: 12px;
    --padding-bottom: 12px;
    --padding-left: 10px;
    --padding-right: 10px;
    margin-bottom: 18px !important;
    margin-top: 18px !important;
  }

In this case I can’t really modify the line height of the button due to the shadow DOM. Does anyone knows how to style that by its slot or similar?

Thanks again

Ah ok, thanks, has the tag already being introduced? I didnt found it on the top of the tag select, and found so many topic on v4 tagged with ionic/ionic-v3 that I assumed it was the standard and selected that. In case I would make more attention.

[Dovel]

Multi Line buttons in Ionic is really a challenge. In Ionic v3 created a multiline button with a icon on the top. It was a lot of “hack”. In Ionic 4 the button does not work anymore. And I stopped the debugging on it for time reasons.

You could create your own component with the same styles like Ionic and the ion ripple tag.

PS: Ionic v4 ist just “Ionic”. (Info in the description of a category.)

[SatyaVaishnav]

Try This

<ion-button expand="block" fill="outline" class="add-line-height" >A Mental Health<br> Professional <br> 1 (800) 667-8888</ion-button>

ion-button.add-line-height{
*{
line-height: 1.5;
}
}