search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[text field] Outlined input label is one pixel off #44341

Open MonstraG opened 2 weeks ago

MonstraG commented 2 weeks ago

Steps to reproduce

Here are 4 focused inputs:

image

  1. Outlined input as seen on https://mui.com/material-ui/react-text-field/

This input's styles have 

transform: translate(14px, -9px) scale(0.75);

by default.

  1. Same input, but I've set 
    transform: translate(15px, -9px) scale(0.75);

Just comparing input 1 and input 2, to my eye, the "margin" where there is no border looks more even in the version 2 than in the version 1. But, we can check that if we see where the "margin" comes from

  1. Input 1, but with fieldset set to visibility: visible and label inside to opacity: 1, the white text is the aria label that also serves, thanks to it's padding, to create this "magin" in the border.

  2. Input 2, but with fieldset visible.

It is quite clear in inputs 3 and 4 that the label is misaligned to the fieldset. The version in 4th is still not quite 100% there, but it's much less than a pixel off, so I'm not sure what can be done about it.

In order to fix the mismatch either the fieldset invisible version must be moved, or the visible version must be moved.

If the transtion is to be changed, here it is: (but don't forget about the non-focused versions)

https://github.com/mui/material-ui/blob/412dcbf9d54b29d85353f1ff9947a78beb6ed7c1/packages/mui-material/src/InputLabel/InputLabel.js#L169

Another option is to change the NotchedOutline here:

https://github.com/mui/material-ui/blob/412dcbf9d54b29d85353f1ff9947a78beb6ed7c1/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L16

from padding: 0 8px to padding: 0 7px, because 1px of horizontal size is provided by the border anyway. I think this is actually the most correct change.

Search keywords: Outlined input label misaligned

oliviertassinari commented 1 week ago

This reminds me a bit of #36288