Select Field Rendering Incorrectly

Topic: Select Field Rendering Incorrectly

dwilbur pro premium priority asked a year ago

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

Add comment

Grzegorz Bujański staff answered a year ago

0 0 Best answer

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

Add comment