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: ion-input-password-toggle causes UI misalignment with clear-input icon #30023

Open
3 tasks done
braincomb opened this issue Nov 19, 2024 · 0 comments
Open
3 tasks done
Labels

Comments

@braincomb
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Currently, with clear-input it shifts the icon to the left, so the alignment looks weird:

image

Expected Behavior

Ideally, we want something like this:

image

Oddly enough when trying to apply CSS positioning, it makes the icon non-interactable, i.e. can't click on it anymore.

Steps to Reproduce

          <ion-input aria-label="Password" type="password" placeholder="Password" clear-input>
            <ion-icon slot="start" :icon="lockClosedOutline" aria-hidden="true"></ion-icon>
            <ion-input-password-toggle  slot="end"></ion-input-password-toggle>
          </ion-input>

Code Reproduction URL

N/A

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/braincomb/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.3.3

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

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

System:

NodeJS : v22.11.0 (/home/braincomb/.nvm/versions/node/v22.11.0/bin/node)
npm : 10.9.0
OS : Linux 5.15

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Nov 19, 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