Hello everyone.
I am working on the migration one of my applications to the new Ionic 7 version, but I am having some difficulties regarding the new API for inputs and forms. My application is a web app that primarily runs in the browser.
The problem lies in the fact that the inputs in my application have a slight visual customization that was easily achieved in the old version of Ionic since the was a completely distinct component from the , just by customizing each of the respective elements.
How can I customize the input to look this way using the new API?
Ionic 6
<ion-col size="12">
<ion-label required>Username</ion-label>
<ion-input formControlName="username"
class="text-input"
placeholder="Fill your username"
[legacy]="true">
</ion-input>
</ion-col>
Ionic 7
<ion-col col="12">
<ion-input formControlName="username"
fill="outline"
label="Username"
labelPlacement="stacked"
placeholder="Fill your username">
</ion-input>
</ion-col>
This would work perfectly if the label created automatically by the new API didn’t overlap with the outline.
1 post - 1 participant