Ionic: Align Button in input with stacked label

Issue

I have some issues with ionic placing my button where I expect it:

I want my button to be on the same line as the input, like the clear-button.

This is my code:

<ion-item>
  <ion-label position="stacked">New answer</ion-label>
  <ion-input clear-input></ion-input>
  <ion-button slot="end">+</ion-button>
</ion-item>

I already tried to put the button inside the input as well – then it is on line, but the end-slot does not work there anymore. Is there any way I can do this? This should be the last line in a list. If I put the label in front of it, you can hardly see it is an input field at all.

Solution

Add class="ion-align-self-end" to the button component

Answered By – Lindstrom

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0