bug: ion-input height and text alignment does not match Material design

[sverdlov]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

The alignment of input is incorrect.

Expected Behavior

Expecting see correct behavior like in Material UI Material Text Field

Steps to Reproduce

Just create project from scratch. Use following code

<ion-item mode='md' fill='outline'>
    <ion-label position='floating'>Login</ion-label>
    <ion-input></ion-input>
</ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic CLI : 6.18.1 (/home/andrew/.nvm/versions/node/v14.17.3/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.3 @angular-devkit/build-angular : 13.0.4 @angular-devkit/schematics : 13.0.4 @angular/cli : 13.0.4 @ionic/angular-toolkit : 5.0.3

Additional Information

No response

[sean-perkins]

@sverdlov thanks for reporting this issue. After comparing the two design implementations, these are the immediate differences I have identified:

Item	MD	Ionic
Item height	56px	57px
Vertical input text alignment	Center to container (~20px top/bottom)	Undetermined (17px top/26px bottom)

Is there any other design issues you are noticing that you would like to include?

[sean-perkins]

Updating the title and tracking as a bug based on previous comment.

[enrique-lozano]

Updating the title and tracking as a bug based on previous comment.

Any news on this? The text alignment inside the ion-input is clearly wrong when fill="outline" on the item. There is too much space at the bottom of the input

[Yura13]

When do you plan to fix this issue because text alignment looks awful?

[sean-perkins]

The team is actively working on two upcoming releases and has not prioritized this issue yet.

This repository is open source however and the alignment and height differences have been documented above. If this issue is a pain point for you and your application, we would gladly welcome a pull request that works to resolve this problem.

Thanks!

[enrique-lozano]

By lowering the height of the field a bit you can get the text inside to be more or less centered:

.md .item-fill-outline {
  &::part(native) {
    height: 50px;
  }
}

It's probably not the best solution since the input really should be 56px following the Material Design specifications, but for now it does the trick for me. I'm waiting to see if the ionic team or someone else comes up with a better solution (I've tried to investigate the css further and I can't find any)

[liamdebeasi]

Thanks for the report. In Ionic 7 we are introducing a new syntax for working with ion-input. This issue is fixed when using that new syntax. We will have an Ionic 7 beta in the future where developers can test and provide feedback. There will also be a migration guide to show how to update to the new input syntax.

The work required to resolve this has been completed, so I am going to close this thread. Let me know if there are any questions.

[ionitron-bot[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.