Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Floating Label Not Vertically Centered in ion-input on iOS (fill="outline" mode="md") #30093

Open
3 tasks done
oskarkarol opened this issue Dec 20, 2024 · 0 comments
Open
3 tasks done
Labels

Comments

@oskarkarol
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

I am experiencing an issue with the ion-input component when using the following configuration:

<ion-input label="Outline input (broken on ios)" label-placement="floating" fill="outline" mode="md" placeholder="Enter text" ></ion-input>

bug

While the floating label appears vertically centered in most cases, the label is not properly centered when unfocused on iOS devices (physical or simulator). Below are the details of the issue:

Expected Behavior

The floating label should remain vertically centered when unfocused, as it does when focused.

Screenshot 2024-12-19 at 15 08 53

Steps to Reproduce

Steps to Reproduce:

  1. Use the configuration mentioned above in a project.
  2. Test the UI on an iOS device or the IOS Simulator on Mac.
  3. Observe the unfocused state of the floating label.

Code Reproduction URL

https://github.com/oskarkarol/test

Ionic Info

changeme@2940b37a-ebee-4200-8564-3f831c0695c0 ~/D/G/test (main)> ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module
'@capacitor/ios/package.json'

   Require stack:
   - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module
'@capacitor/android/package.json'

   Require stack:
   - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
   - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 19.0.6
@angular-devkit/schematics : 19.0.6
@angular/cli : 19.0.6
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.12.0 (/opt/homebrew/Cellar/node@22/22.12.0/bin/node)
npm : 10.9.0
OS : macOS Unknown

changeme@2940b37a-ebee-4200-8564-3f831c0695c0 ~/D/G/test (main)>

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant