Bottom align ion-note or ion-buttons in ion-item with stacked label?

Ionic Framework Ionic Angular
1

When using a slot end on my ion-note or ion-buttons inside my ion-item that uses a stacked label with the input, the note or buttons are aligned to the top. Is there a way to easily bottom align them?

2

This was the code I had attempted.

<ion-item lines="none" [class.error]="((password.dirty || password.touched) && password.errors)">
    <ion-label position="stacked">Password</ion-label>
    <ion-input name="password" type="password" formControlName="password"></ion-input>
    <!--<ion-note slot="end">Show</ion-note> -->
    <ion-buttons slot="end">
        <ion-button fill="clear">Show</ion-button>
    </ion-buttons>
</ion-item>

Here was the outcome:
Screen Shot 2022-01-31 at 9.59.42 AM

I’m trying to get the “Show” to be bottom aligned.

3

So the class you’re looking for is .ion-align-self-end

Ion-buttons does have some margin, so you’ll probably need to adjust that to get it to be all the way to the bottom of the item.