Description
Prequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
Current Behavior
When using an ion-select with fill=outline and a floating label the initial label is positioned right but after selecting a value the alignment of the selected value is false.
Expected Behavior
Selected value is aligned like other input values (see e.g. birthdate).
Steps to Reproduce
<ion-item fill="outline" class="ion-margin-top">
<ion-label position="floating">Gender *</ion-label>
<ion-select formControlName="gender">
<ion-select-option [value]="gender.FEMALE">Female</ion-select-option>
<ion-select-option [value]="gender.MALE">Male</ion-select-option>
<ion-select-option [value]="gender.NON_BINARY">Non Binary</ion-select-option>
</ion-select>
</ion-item>
Code Reproduction URL
No response
Ionic Info
Ionic:
Ionic CLI : 6.12.3 (C:\Users\xxx\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.0-beta.1
@angular-devkit/build-angular : 12.0.5
@angular-devkit/schematics : 12.1.0
@angular/cli : 12.0.5
@ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.0.2
@capacitor/core : 3.0.2
Utility:
cordova-res (update available: 0.15.2) : 0.15.1
native-run : 1.4.0
System:
NodeJS : v16.3.0 (C:\Program Files\nodejs\node.exe)
npm : 7.17.0
OS : Windows 10
Additional Information
According to the material design guidelines it should look like in the image below.
