Topic: Programmatically created modal input showing label and value overlayed

Magnus priority asked 1 month 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.


Magnus priority answered 4 weeks ago


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


Magnus priority answered 1 month ago


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


kpienkowska staff commented 1 month ago

You need to press Publish for me to be able to see your snippet.


Magnus priority answered 1 month ago


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.


Magnus priority answered 1 month ago


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 1 month 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.


kpienkowska staff answered 1 month ago


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


kpienkowska staff answered 1 month ago


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 month 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.



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

  • User: 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