input float-label not centered after changing input.form-con


Topic: input float-label not centered after changing input.form-control height

Luisilva pro premium asked 4 years ago

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 .


Michał Duszak staff answered 4 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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