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.

Sign up for GitHub

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

Jump to bottom

Select: Invalid padding calc when clear icon present #5847

Closed
nfejzic opened this issue Jun 6, 2024 · 0 comments · Fixed by #5848
Closed

Select: Invalid padding calc when clear icon present #5847

nfejzic opened this issue Jun 6, 2024 · 0 comments · Fixed by #5848
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone
4.0.0-rc.2

Comments

@nfejzic
Copy link

nfejzic commented Jun 6, 2024

Describe the bug

When using Select component with show-clear property and long enough text the padding is not correctly set and the clear button overlaps the text.

See this example:

image

I have a fix for this and will open a PR in a moment.

Reproducer

https://stackblitz.com/edit/vitejs-vite-uhadb8?file=src%2FApp.vue

PrimeVue version

4.0.0-beta.4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 125.0.6422.142

Steps to reproduce the behavior

  1. Create a Select component
  2. Add show-clear prop
  3. Have selected value have long-enough label
  4. The clear button will overlap the label

Expected behavior

The clear button should be separated from the label by some distance.
@nfejzic nfejzic added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jun 6, 2024
@nfejzic nfejzic mentioned this issue Jun 6, 2024
Merged
@mertsincan mertsincan modified the milestones: 4.0.0-rc.1, 4.0.0-rc.2 Jun 13, 2024
@mertsincan mertsincan linked a pull request Jun 14, 2024 that will close this issue
fix: use units in select label padding calculation #5848
Merged
mertsincan added a commit that referenced this issue Jun 14, 2024
@mertsincan
Fixed #5847
917ef22
@mertsincan mertsincan added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Milestone
4.0.0-rc.2
Development

Successfully merging a pull request may close this issue.

fix: use units in select label padding calculation nfejzic/primevue
2 participants
@mertsincan @nfejzic