Skip to content

[bug]: Textarea content is visible on top of its label #5510

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
Open
leagrdv opened this issue May 16, 2025 · 1 comment · May be fixed by #5547
Open

[bug]: Textarea content is visible on top of its label #5510

leagrdv opened this issue May 16, 2025 · 1 comment · May be fixed by #5547
Assignees
@myrta2302
Labels
🐞 bug Something isn't working v10
Milestone
Long Term Support...

Comments

@leagrdv
Copy link
Contributor

leagrdv commented May 16, 2025

🐞 Describe the bug

When the textarea is filled with scrollable content, we can see some of the text on top of the label because it's not flush with the top of the input.

🛠️ To Reproduce

Steps to reproduce the behavior:

  1. Write multi line text on a textarea input
  2. Scroll down in the textarea
  3. On top of the label, you can see some of the text

📷 Screenshots

Image

💻 Desktop

  • Browser: Edge
@leagrdv leagrdv added 🐞 bug Something isn't working v10 labels May 16, 2025
@alizedebray alizedebray added this to the Long Term Support v10 milestone May 21, 2025
@alizedebray alizedebray moved this from 👀 Triage to 🆗 Ready in Design System Production Board May 21, 2025
@myrta2302 myrta2302 self-assigned this May 26, 2025
@myrta2302 myrta2302 linked a pull request May 27, 2025 that will close this issue
chore(styles): adjust textarea floating label top position to fix subpixel gap at 125% scaling #5547
Open
@myrta2302 myrta2302 moved this from 🆗 Ready to 🧐 In Review in Design System Production Board May 27, 2025
@myrta2302 myrta2302 added the needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. label May 27, 2025
@oliverschuerch
Copy link
Contributor

Resolution:
Remove the gap at 125% scale, so textarea text is not visible between the label background and the textarea border.
Leave the border with as is.

@oliverschuerch oliverschuerch removed the needs: 💬 pattern discussion This issue will be discussed in the next Pattern Discussion meeting. label May 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@myrta2302 myrta2302

Labels
🐞 bug Something isn't working v10
Projects
Design System Production Board
Status: 🧐 In Review
Milestone
Long Term Support v10
4 participants
@oliverschuerch @alizedebray @myrta2302 @leagrdv