Programmatically created modal input showing label and value

Topic: Programmatically created modal input showing label and value overlayed

Magnus pro premium priority asked 2 years ago

Expected behavior Dynamic modal from template expected to show input-box with value in box and label outlined
Actual behavior Modal showing input-box with value and label overlayed until user clicks the input. Resources (screenshots, code snippets etc.) Please see following code snippet: https://jsfiddle.net/5cdx7wp2/#&togetherjs=pDn195j6I9 Please advice.

Add comment

kpienkowska staff answered 2 years ago

0 0 Best answer

I've created a snippet based on your code example: https://mdbootstrap.com/snippets/standard/kpienkowska/4923998

All it is needed is adding a label width update after the modal is shown. Additional code is in the JS tab of the snippet.

Magnus pro premium priority commented 2 years ago

Thank you and this works for .form-outline now however not for the multiselect .select boxes. I tried using following code:

document.querySelectorAll('.select').forEach((element) => { new mdb.Select(element).init(); });

However this is duplicating the select box rather than just initializing it. Please advice how to initialize the select box component.

Add comment

kpienkowska staff answered 2 years ago

0 0 Best answer

I've updated your example to show how to add and init select:https://mdbootstrap.com/snippets/standard/kpienkowska/4954226

Add comment

Magnus pro premium priority answered 2 years ago

0 0 Best answer

How to make this generic for updating any component? For "select" I tried using following code:

document.querySelectorAll('.select').forEach(
    (element) => { new mdb.Select(element).init(); }
);

However this is duplicating the select box rather than just initializing it.

Please advice how to initialize the select box component.

kpienkowska staff commented 2 years ago

I've added an example of select init below. It can't be made generic. If you want to hook class select to make init you will be doing second initialization since class select is there as a hook for auto init.

Add comment

Magnus pro premium priority answered 2 years ago