fix label width to use properly the outlined input

user_6476488 0
Viewed 1370

I'm just trying to use a with a long label but when it gets too long it jumps the line despite having space for the word.

https://codesandbox.io/s/reverent-bhabha-i736y

so basically, looks like it is not being properly calculated, so I want to calculate it manually, I was trying to use the label ref, but it doesnt work.

edit:

to be more precise, lets suppose our label is I want to do this right, right? it will look like this:

---I want to do         -----
|   this right              |
-----------------------------

note the space that is left, that is not correct.

when it should be: 

-- I want to do this right ------
|                               |
---------------------------------

as far as I saw the label has space but for some reasons, it breaks the line. notice that this is a problem with outlined TextFields

material-ui reactjs
1 Answers

Your problem is

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

transform works after element was calculated and placed to the DOM. If you will remove scale(0.75) you will see that your element takes all available space.

How to fix:

remove your transform: translate(14px, -6px) scale(0.75); and add this code instead

.MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(0, -6px);
    font-size: 12px;
    margin: 0 14px;
    background-color: white;
}
user_81637730
Related