Closed
Description
Bug Report
Ionic version:
[x] react 4.11.0
Current behavior:
IonLabel is positioned incorrectly in iOS only. It seems IonLabel is far too low when used in an input box for iOS user agents. It is positioned correctly for Web and Android user agents however - refer to screenshots below.
Expected behavior:
iOS labels should be centered just like in the Web or Android version
Steps to reproduce:
Using the dark theme described in the documentation and trying to use floating labels. No other styling changes required.
Related code:
// Input.tsx
import React from 'react'
import { TextFieldTypes } from '@ionic/core'
import { IonInput, IonItem, IonLabel } from '@ionic/react'
type InputProps = {
placeholder: string
type?: TextFieldTypes
}
const Input = ({ placeholder, type = 'text' }: InputProps) => (
<IonItem className='ion-margin-vertical'>
<IonLabel position='floating'>{placeholder}</IonLabel>
<IonInput type={type} />
</IonItem>
)
export default Input
Using it like below
<form>
<Input type='email' placeholder='Email Address' />
<Input type='password' placeholder='Password' />
<IonButton
expand='block'
onClick={submit}
type='submit'
>
Sign In
</IonButton>
</form>
Other information:
Screenshot with iOS user agent
It is quite easy to see how the Password label is misplaced (specially when comparing to the android screenshot), however when selecting the input box, the label floats correctly.
Screenshot with Android user agent
Ionic info:
> ionic info
Ionic:
Ionic CLI : 5.4.13 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/react 4.11.7
Capacitor:
Capacitor CLI : 1.4.0
@capacitor/core : 1.4.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v13.2.0 (/usr/local/Cellar/node/13.2.0/bin/node)
npm : 6.13.1
OS : macOS Catalina