[Select] Overlapping label border with the InputLabel
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Select label overlapping border when the InputLabel has shrink property and the current value of select is “”
Expected behavior 🤔
The select label must not overlap border when the InputLabel has shrink property and the current value of select is “”
Steps to reproduce 🕹
https://codesandbox.io/s/basicselect-material-demo-forked-z9ugvp?file=/demo.tsx
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.3.1
Binaries:
Node: 16.13.1 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.1.2 - /usr/local/bin/npm
Browsers:
Chrome: 100.0.4896.88
Edge: Not Found
Firefox: Not Found
Safari: 15.4
npmPackages:
@emotion/react: ^11.8.1 => 11.8.1
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.69
@mui/icons-material: ^5.4.2 => 5.4.2
@mui/lab: ^5.0.0-alpha.69 => 5.0.0-alpha.69
@mui/material: ^5.4.2 => 5.4.2
@mui/private-theming: 5.4.2
@mui/styled-engine: 5.4.2
@mui/system: 5.4.2
@mui/types: 7.1.2
@mui/utils: 5.4.2
@types/react: ^17.0.39 => 17.0.39
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.5.5 => 4.5.5
Issue Analytics
- State:
- Created a year ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Material-UI TextField Outline Label is overlapping with border ...
Click the "Confirmation Code" TextField . Notice the border has rendered incorrectly and is causing the label to overlap with the border. For ......
Read more >Textfield label overlapping issue - code helper
When you click the button below, the same form will be displayed. Note the textfield's label/title - The border will still visible behind...
Read more >[Solved]-React Material UI Label Overlaps with Text-Reactjs
<InputLabel shrink={true}>Select A Role</InputLabel>. InputLabelProps gave error in functional component in react. Manohar Reddy Poreddy 21115. score:0.
Read more >inputlabelprops= shrink true | The AI Search Engine You Control
React Material UI Label Overlaps with Text ... The theme also sets notched to false, since we styled the InputLabel to fit inside...
Read more >Select API - Material UI - MUI
Name Type Default
autoWidth bool false
children node
classes object
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The weird thing about this bug is that is only happens when the value is an empty string.
Take that original post codesandbox as an example: https://codesandbox.io/s/basicselect-material-demo-forked-z9ugvp?file=/demo.tsx
Change
line 9
to:And it works as expected 🤔
@XAHTC As a workaround, you can add the prop notched into the Select and solve the problem.