Topic: Center labels
Expected behavior label on input is centered and when focus is on the text input, the animation moves the label to the upper left-hand corner
Actual behavior stays to the left
Resources (screenshots, code snippets etc.)
code used: css .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label { opacity: 0.65; left: 50%; top: 30%; transform: scale(0.85) translate(-50%, -50%); }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.4.0
- Device: PC
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 11 months ago
Before focusing input, you want to have label centered how? Vertically, horizontally, or both?
After focusing, it moves to the top-left corner ,so is itlike expected?
andrew3 priority commented 11 months ago
I'd like it centered both vertically and horizontally. Upon focus moving to the upper left is fine, but initial presentation I'd like it to be centered.
Mateusz Lazaru staff commented 11 months ago
like that? https://mdbootstrap.com/snippets/standard/mlazaru/5238870#css-tab-view