input-group form-outline bad processing

Topic: input-group form-outline bad processing

efilippi pro premium priority asked 10 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'); }); });

Add comment

Mateusz Lazaru staff answered 10 months ago

1 0 Best answer

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

Add comment

efilippi pro premium priority answered 10 months ago