outlined TextField with long label causes scroll
Open
Nobody has claimed this yet.
design
scope: text field
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
When TextField component has long label, fieldset height increases. This causes horizontal scroll to appear.
Expected Behavior 🤔
If input label width is not bigger that field width, no scroll should appear.
Steps to Reproduce 🕹
Minimal example that shows the issue
https://codesandbox.io/s/wonderful-elbakyan-7j0wl?file=/src/App.js
https://codesandbox.io/s/vibrant-allen-kspmn
Steps:
Context 🔦
Your Environment 🌎
`npx @material-ui/envinfo`
Don't forget to mention which browser you used.
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
Memory: 12.04 GB / 31.26 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Managers:
Apt: 2.0.5 - /usr/bin/apt
RubyGems: 3.1.2 - /usr/bin/gem
Utilities:
CMake: 3.16.3 - /usr/bin/cmake
Make: 4.2.1 - /usr/bin/make
GCC: 9.3.0 - /usr/bin/gcc
Git: 2.25.1 - /usr/bin/git
Virtualization:
Docker: 20.10.6 - /usr/bin/docker
IDEs:
Nano: 4.8 - /usr/bin/nano
VSCode: 1.55.2 - /usr/bin/code
Languages:
Bash: 5.0.17 - /usr/bin/bash
Perl: 5.30.0 - /usr/bin/perl
Python: 2.7.18 - /usr/bin/python
Python3: 3.8.5 - /usr/bin/python3
Ruby: 2.7.0 - /usr/bin/ruby
Databases:
MongoDB: 3.6.8 - /usr/bin/mongo
Browsers:
Chrome: 90.0.4430.93
Firefox: 88.0.1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and inspect the outlined TextField behavior with a long label in Chrome. Reproduce the increased fieldset height and horizontal scroll, then verify that a label no wider than the field no longer causes horizontal scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100