Topic: input-group form-outline bad processing

efilippi priority asked 9 months ago


Hello,

I'm facing a problem with MBP processing when loading a hiden div (d-none) containing a form label.

The form label style "margin-left" should be 44px, but it's -1px It seems that MDB does not process correctly when the div is hidden.

Source code :

Prénom

Expected behavior

after MDB processing

Prénom

Actual behavior

after MDB processing

Prénom

Resources (screenshots, code snippets etc.)

snippet : snippet

So I found a bypass that waits for complete page load before applying the d-none, but it's not clean :

addEventListener("load", (e) => { document.getElementsByName("psuivantblock").forEach ((psuivantblock) => { psuivantblock.classList.remove ('d-inline-flex'); psuivantblock.classList.add ('d-none'); }); });


Mateusz Lazaru staff answered 9 months ago


Thanks for reporting this problem and workaround. However, it's not exactly component's bug. It calculates its styles on init, so when component has no dimensions it could not calculate it properly. We have created an update() method for such cases:

https://mdbootstrap.com/snippets/standard/kpienkowska/5920562


efilippi priority answered 9 months ago


Thank you it works perfectly now !



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.2.0
  • Device: computer
  • Browser: firefox
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes