Material textarea label

web
mobile

Topic: Material textarea label

lede pro asked 2 years ago

The textarea label seems to be hovering excessively high above the textarea in comparison to text fields. I think this is new in 4.5.7 but not completely sure. I upgraded yesterday and it jumped out at me on my pages today so I don't think it was like this in 4.5.6

Jakub Mandra staff premium answered 2 years ago

Hello, This component was not changed in the last update. But, we had some discussions (some users prefer the textarea to be smaller, or even same size as input). We are going to do some research and ask our community what do they think about it, so you could give us your opinion then :)   Regards, Jakub from MDB

lede pro answered 2 years ago

I have fixed this problem. If you look at a text input, the label sits on the line (bottom border). When you click it the label slides up and you type where the cursor is. If  you do the same with a md-textarea it doesn't look right. The label is too high. When you click it, the label slides up but where you type is not where the label was positioned. It looks odd. I added the following style to my css which makes a 1 row textarea look the same as a standard text input.
.md-form textarea.md-textarea {
  padding: .3rem 0 .55rem;
}
This has corrected the issue for me, the cursor appears where the label was and the label isn't hovering too far above the input

Marta Szymanska staff pro premium commented 2 years ago

OK, great.

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No