Topic: input float-label not centered after changing input.form-control height
Actual behavior
After changing the height of the input.form-control the label is too high/not centered, as the placeholder is
Wanted behavior
After changing the height of the input.form-control the label should continue to be centered
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/luisilva/2970067#css-tab-view
Solution Tried
Padding-top on the label. But then the small floating label text (on focus) also has the padding and is not in the right position
https://mdbootstrap.com/snippets/standard/luisilva/2970089#css-tab-view
Thank you for any help .
Hello! Your solution is only missing a padding-top to be set after the input is being focused.Consider adding this CSS to your snippet.
.form-outline .form-control:focus~.form-label{
padding-top:0.30em!important;
}
See how it's done in the following snippet: https://mdbootstrap.com/snippets/standard/m-duszak/2974160
Keep coding,
Michal Duszak.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes