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

Password: icon with togglemask #6396

Closed
eairafao opened this issue Apr 15, 2024 · 4 comments · Fixed by #6493
Closed

Password: icon with togglemask #6396

eairafao opened this issue Apr 15, 2024 · 4 comments · Fixed by #6493
Assignees
Labels
Component: Theme Issue or pull request is related to Theme Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@eairafao
Copy link

Describe the bug

togglemask was working normally in some past updates... but now it's bugged, instead of it being on the right and with spacing, it's on the left and without spacing

Reproducer

No response

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Expected behavior

No response

@eairafao eairafao added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 15, 2024
@eairafao
Copy link
Author

image

@eairafao
Copy link
Author

image

@melloware melloware changed the title some icons are bugged in inputs, in my case it is the Password component which has a problem with togglemask Password: icon with togglemask Apr 15, 2024
@melloware melloware added Component: Theme Issue or pull request is related to Theme and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Apr 15, 2024
@melloware melloware added this to the 10.6.4 milestone Apr 15, 2024
@melloware
Copy link
Member

I fixed the Showcase ones: #6386 but the Password looks like a different issue

@anicarrr
Copy link

I'm temporally using the following code to fix it:

.p-input-icon-right > svg {
    position: absolute;
    left: 100%;
    margin-left: -2rem;
}

Here it is the original style:

.p-input-icon-left > i,
.p-input-icon-right > i,
.p-input-icon-left > svg,
.p-input-icon-right > svg,
.p-input-icon-left > .p-input-prefix,
.p-input-icon-right > .p-input-suffix {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}

melloware added a commit to melloware/primereact that referenced this issue Apr 29, 2024
@melloware melloware assigned melloware and unassigned nitrogenous and gucal Apr 29, 2024
nitrogenous added a commit that referenced this issue Apr 30, 2024
Fix #6396: Password use IconField for toggle mask
@nitrogenous nitrogenous added the Type: Bug Issue contains a defect related to a specific component. label Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Theme Issue or pull request is related to Theme Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants