Prerequisites
Ionic Framework Version
v8.x
Current Behavior
The ion-input-password-toggle component causes layout shifts when it's parent ion-input has a disabled or readonly property
Affect is particularly visible when ion-input has labelPlacement="stacked"
Expected Behavior
Layout should not shift
Steps to Reproduce
- Go to Code Reproduction URL
- Click on Submit
- Observe layout shift
Code Reproduction URL
https://stackblitz.com/edit/waav8e?file=src%2Fmain.tsx
Ionic Info
Ionic:
Ionic CLI : 7.2.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v18.18.2
npm : 9.8.1
OS : Windows 10
Additional Information
Issue is caused because the ion-input-password-toggle component is larger than ion-input
The display: none css property may be replaced by visibility: hidden instead here:
|
/** |
|
* The input password toggle component should be hidden when the input is readonly/disabled |
|
* because it is not possible to edit a password. |
|
*/ |
|
:host([disabled]) ::slotted(ion-input-password-toggle), |
|
:host([readonly]) ::slotted(ion-input-password-toggle) { |
|
display: none; |
|
} |
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
The ion-input-password-toggle component causes layout shifts when it's parent ion-input has a
disabledorreadonlypropertyAffect is particularly visible when ion-input has
labelPlacement="stacked"Expected Behavior
Layout should not shift
Steps to Reproduce
Code Reproduction URL
https://stackblitz.com/edit/waav8e?file=src%2Fmain.tsx
Ionic Info
Ionic:
Ionic CLI : 7.2.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v18.18.2
npm : 9.8.1
OS : Windows 10
Additional Information
Issue is caused because the ion-input-password-toggle component is larger than ion-input
The
display: nonecss property may be replaced byvisibility: hiddeninstead here:ionic-framework/core/src/components/input/input.scss
Lines 609 to 616 in f238b42