Topic: Select Field Rendering Incorrectly
Expected behavior
When a select field is originally set to display: none using CSS and changed to display: block it should display normally
Actual behavior
When the select field is changed to display: block it actually displays with part of the perimeter overlapping the text
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/wilbur/5523937
Label indent width is calculated based on label length. If the element is not visible when the page is loaded, its width is 0px. That's why the select when it appears displays incorrectly.
After changing display to block, just use the update() input method, which will recalculate the width of the label: https://mdbootstrap.com/docs/standard/forms/input-fields/#section-update
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 6.4.1
- Device: Dell Laptop
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes