Topic: HTML select element in a mdb-editor modal
Select element on the modal should display the selected option title however it does not.
Select element on the modal displays the data value, not the list option title. I have attempted to select the correct option in code by adding code to the 'show.bs.modal' event to get the current data row and setup the select element but that does work either.
In fact adding the select element to the modal tends to break the reset of page with fields and their respective contents no longer lining up. Attempting to use a multi-select (with the 'multiple' option breaks it even worse.
I have created a snippet to demonstrate the issue. It is actually worse than the code in my project as the element does not even render as the material design element even though 'mdb-select' is added to the classes.
https://mdbootstrap.com/snippets/jquery/darrenh65/2635960
I'm assuming I'm missing one or more classes to wrap the element in but I can't find any documentation referring to the element.
Hi darrenh65,
Thank you for pointing out information about $('.mdb-select').materialSelect({destroy:true});. As for the second question DataTable component doesn't support creating Select inside Modal Editor because Select introduces its own content which, as you noticed pushes other Input fields by one index.
I've created custom functionality for you that creates a placeholder Input element inside modal to receive proper data from the DataTable, which at Modal open will be replaced with your Material Select and other indexes will stay intact. After closing Modal function will once again replace Select with placeholder Input.
https://mdbootstrap.com/snippets/jquery/marcin-luczak/2637420
Best regards, Marcin
Hello,
Material Select is an element that unlike basic Select needs to be explicitly initialized via JavaScript. In your case to avoid console errors regarding material select not being rendered into DOM, you need to listen to show.bs.modal or shown.bs.modal events and initialize the select element inside events callback. Please see my snippet: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2637420
I hope that will solve your problem
Regards, Marcin
Hi Marcin,That does fix the select element. I was calling materialSelect() from the $(document).ready() function, not from within the modal event function.
However that now breaks the rest of the form with each field being pushed down by one element. If you look at your snippet you'll see in the edit modal that the correct option for Foo is now in the office element, the office value is now in the age element and so on.
There is also a second problem. If the edit modal is closed and another row is selected and the edit modal is opened again the select element is duplicated. So there is now two select elements on the form. This is because materialSelect() is being called each time the modal is opened. how do we stop that from occurring?
regards,Darren
Hi Marcin, Don't worry about point 2. I have discovered $('.mdb-select').materialSelect({destroy:true});. That fixed the duplicate select issue.
Point 1. is still a problem though
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: Linux/win10 PC
- Browser: Firefox/Chrome
- OS: Linux CentOS 7
- Provided sample code: No
- Provided link: Yes