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

Textarea progress bar hides text when typing #3528

Closed
emilio opened this issue Feb 2, 2021 · 4 comments · Fixed by #3535
Closed

Textarea progress bar hides text when typing #3528

emilio opened this issue Feb 2, 2021 · 4 comments · Fixed by #3535
Assignees
@karlcow
Labels
lang: CSS type: bug

Comments

@emilio
Copy link
Contributor

emilio commented Feb 2, 2021

Happens on all browsers. It makes me not able to read what I'm writing for example. See screenshots.

Screenshot_20210202-065150
@softvision-oana-arbuzov
Copy link
Member

The issue is also reproducible on desktop layout.
image

Tested with:
Browser / Version: Firefox Nightly 87.0a1 (2021-02-09)
Operating System: Windows 10 Pro

@softvision-oana-arbuzov softvision-oana-arbuzov changed the title Textarea progress bar hides text when typing on mobile Textarea progress bar hides text when typing Feb 9, 2021
@karlcow
Copy link
Member

karlcow commented Feb 10, 2021 •
edited
Loading

This can be easily fixed with


/* webcompat.css | https://webcompat.com/dist/webcompat.css */

@media (min-width: 665px) {
  .issue-form .text-field {
    /* padding: 11px 36px 11px 8px; */
    padding: 11px 36px 3ch 8px;
  }
}

@karlcow karlcow self-assigned this Feb 10, 2021
karlcow added a commit to karlcow/webcompat.com that referenced this issue Feb 10, 2021
@karlcow
issue webcompat#3528 - Fix CSS for description textarea
63e104d
@karlcow karlcow mentioned this issue Feb 10, 2021
Closed
@karlcow karlcow linked a pull request Feb 10, 2021 that will close this issue
fix #3528 - Fix CSS for description textarea #3534
Closed
@karlcow
Copy link
Member

karlcow commented Feb 10, 2021

pull request done. #3534

emilio added a commit to emilio/webcompat.com that referenced this issue Feb 10, 2021
@emilio
Fix webcompat#3528
f0be658 
Make the progress bar not overlap the textarea. While at it, also remove useless `content: ""` rules which do nothing, and an useless `width` declaration which also does nothing because it's the same width as the block would have minus margins.
@emilio emilio mentioned this issue Feb 10, 2021
Merged
@karlcow karlcow linked a pull request Feb 10, 2021 that will close this issue
Fix #3528 - Fix CSS for description textarea #3535
Merged
karlcow pushed a commit that referenced this issue Feb 10, 2021
Merge pull request #3535 from emilio/patch-1
37e6b72 
Fix #3528 - Fix CSS for description textarea
Closed
@softvision-oana-arbuzov
Copy link
Member

@karlcow the issue is fixed on mobile but still occurs on desktop.

Mobile:
image

Desktop:
image

Tested with:
Browser / Version: Firefox Nightly 87.0a1 (2021-02-16)
Operating System: Windows 10 Pro

Reopening for further investigation.

Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@karlcow karlcow

Labels
lang: CSS type: bug
Projects
None yet
Milestone
No milestone
3 participants
@karlcow @emilio @softvision-oana-arbuzov