Ionic: Align Button in input with stacked label


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

enter image description here

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

This is my code:

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

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.


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

Leave a Reply

(*) Required, Your email will not be published