Topic: Select Field Rendering Incorrectly

dwilbur priority asked 1 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


Grzegorz Bujański staff answered 1 year ago


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



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

  • 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