Modify the ION-ITEM css

[GuilhermeBCC]

Feature Request

Please, change ion-item css above:

:host(.item-label-floating) .item-native, :host(.item-label-stacked) .item-native {
align-items: start;
}

to:

:host(.item-label-floating) .item-native, :host(.item-label-stacked) .item-native {
align-items: inherit;
}

My ion-item have always been centered now I can no longer align correctly

Ionic version:
[x] 4.x

[liamdebeasi]

Hi there,

This change was made to fix #16375. Can you provide a code example of how you are using ion-item?

Please be sure to include what the expected behavior is and what the actual behavior is.

[GuilhermeBCC]

In #16375 comments
"
I think the solution here (in Ionic) is to change the alignment for stacked/floating items like this:

.item-label-stacked,
.item-label-floating {
align-items: start;
}
and/or move the css for this rule to the parent item and inherit it in the inner one so the user has more control over it.
"
This is a solution.

But configure align-items in INNER,
We do not have access

[liamdebeasi]

Hi there,

I understand what the proposed solution is. It would be very helpful if you could provide an example of how you are using ion-item so we can better understand your use case.

[GuilhermeBCC]

I'm using it in many ways. But the default usage is in Forms or List.
An example of my code:

  <ion-item *ngIf="ip.editing || ip.item.dateOfBirth" @fade>
      <i slot=start class="fa fa-birthday-cake fa-lg"></i>
      <ion-label position=stacked i18n>Data de nascimento (aniversário)</ion-label>
      <ion-input readonly (click)="selectBirth($event)" [ngModel]="ip.item.dateOfBirth?(ip.item.dateOfBirth|date: 'dd/MM'):'Selecione'" name="dateOfBirth"></ion-input>
    </ion-item>

    <ion-item *ngIf="ip.item.type=='student' && (isParent || isSchool)" @fade>
      <i slot=start class=flex>
        <i class="fa fa-malefa-lg"></i>
        <i class="fa fa-female fa-lg"></i>
      </i>
      <ion-label i18n>Sexo</ion-label>
      <ion-button slot=end (click)="changeSex()" [attr.style]="'--color: '+ip.item.female?'lightpink':'lightblue'" fill="outline" type="button">
        {{ip.item.female?'Feminino':'Masculino'}}
      </ion-button>
    </ion-item>

[liamdebeasi]

Thanks for the follow up! I discussed with another team member, and we agree that we should have align-items inherit.

[GuilhermeBCC]

Thanks

[manucorporat]

It should be

:host(.item-label-stacked),
:host(.item-label-floating) {
align-items: start;
}

Agreed this is a much better solution, so it can still be custumized!

[GuilhermeBCC]

@brandyscarney what chance do we see this change in the next version of Ionic?

[brandyscarney]

PR created here: #19278

It just needs review and verification that it didn't have bad effects on other elements.

[spasma]

+1 on this one. I need to set flex alignment on a ion-item button, but it's impossible

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.