Changing style of label for input in Ionic 7 - From legacy to modern syntax

Ionic Framework Ionic Angular
1

PROBLEM

We are in the process to move from Ionic 7 to Ionic 6 and we would like to handle the warnings that we are hitting with ion-label old syntax.

In our old original code we have the following component:

<ion-item>
    <ion-label position="floating">AAA</ion-label>
    <ion-input disabled="true" 
      type="text"
      value="BBB"
    ></ion-input>
  </ion-item>

And we are applying some change of styling like this:

ion-item > ion-label.label-floating,
ion-item > ion-label.label-stacked {
  transform: translateY(50%) scale(1) !important; // the scale is 1 instead of 0.75
}

We would like to achieve the same with the new modern syntax. How to do this?

What we have already tried

Try to use a shadow part

<div>NEW IONIC STYLE WITH LABEL</div>
  <ion-item>
    <ion-input
      disabled="true"
      type="text"
      value="BBB"
      labelPlacement="floating"
      label = "AAA"
    >
    </ion-input>
  </ion-item>

We noticed that ion-select has label as a CSS shadow part and we were able to create the previous style by using this CSS logic.

ion-select::part(label) {
  transform: scale(1) !important;
}

However ion-input does not seems to have the same CSS shadow part and the following CSS logic does not work:

ion-input::part(label) {
   transform: scale(1) !important;
}

Using a class in the slot label

We also tried to use slot with a class.

<div>NEW IONIC STYLE WITH SLOT</div>
  <ion-item>
    <ion-input
      disabled="true"
      type="text"
      value="BBB"
      labelPlacement="floating"
    >
      <div slot="label" class="aaa">AAA</div>
    </ion-input>
  </ion-item>

And the only possibility to achieve what to wish what to do the reverse operation against the ionic behavior.

.aaa{
 transform: translateY(-50%) scale(1.3) !important;
 }

But we would like to overwrite instead to revert the transformation already happened.

Using legacy mode

<div>OLD IONIC STYLE WITH LEGACY</div>
  <ion-item>
    <ion-label position="floating">AAA</ion-label>
    <ion-input disabled="true" 
      type="text"
      value="BBB"
      legacy="true"
    ></ion-input>
  </ion-item>

This works, but we would like to avoid to use legacy=“true” if it is avoidable.

QUESTION

Do you have any idea how to solve the issue?
Having a shadow part for label under ion-input maybe would solve our issue.
Thank you for your attention.

2 Likes
2

I’m in a similar situation, did you find a solution?

1 Like