CODEWITHSUNDEEP
reactjsmaterial-ui
Prince Hernandez
Prince Hernandez

Reputation: 3721

fix label width to use properly the outlined input

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

Upvotes: 3

Views: 1859

Answers (1)

Arseniy-II
Arseniy-II

Reputation: 9167

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;
}

Upvotes: 3

Related Questions