Topic: Programmatically created modal input showing label and value overlayed
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.
Hi kpienkowska,
The stepper plugin is also not initiating. Please have a look at following snippet.
https://mdbootstrap.com/snippets/standard/magnus/5001260
I tried initializing the '.stepper' class in a similar way as the previous, without success.
Please advice
BR Magnus
Please have a look at following multi-select with added data-mdb-filter="true"
Expected is to be able to click in the search box. However its deactivated by default.
https://mdbootstrap.com/snippets/standard/magnus/4989691
Please advice.
Best regards
Magnus
Kamila Pieńkowska staff commented 1 year ago
You need to press Publish for me to be able to see your snippet.
Now initialising the select component works however not when adding filtering.
Please see the following multi-select with added data-mdb-filter="true". https://mdbootstrap.com/snippets/standard/magnus/4989691
The search box is inactivated as default witch is not the expected behaviour.
Please advice.
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.
Kamila Pieńkowska staff commented 1 year 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.
I've updated your example to show how to add and init select:https://mdbootstrap.com/snippets/standard/kpienkowska/4954226
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 priority commented 1 year 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: JsFiddle
- Browser: JsFiddle
- OS: JsFiddle
- Provided sample code: No
- Provided link: Yes