Topic: Large input fields with autocomplete: Wrong label position when data entered
Using autocomplete on a lg form-control does not position label correctly when data entered.
*_Expected behavior_*label stays at same (middle of border line) position when text is entered.
*_Actual behavior_*label moves slightly down when text entered and field loose focus.
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/karg/5872468
It is intentional but if you do not like that you can override this style:
.form-outline .form-control.form-control-lg:focus~.form-label, .form-outline .form-control.form-control-lg.active~.form-label
Suggested value would be:
translateY(-1rem) translateY(0.1rem) scale(0.8);
Karg priority commented 4 months ago
Thanks, for me worked:
.form-outline .form-control.form-control-lg:focus~.form-label, .form-outline .form-control.form-control-lg~.form-label.active { transform:translateY(-1.3rem) translateY(0.1rem) scale(0.8);}
Your second selecor (...form-control-lg.active~.form-label) does not work, because in case of a autocomplete the "active" class is added to the label, not the control (which might be not indended).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes