Topic: MDB Bootstrap Support
NitinMistry free asked 5 years ago
Hi,
I'm using v4.6.0 (not available in the version selection dropdown). I'm adding the select component dynamically by using the sample code provided here. However, whether I add the code directly in the HTML or via JS, there's always 2 carets visible in the component and I'm unable to get rid of the original caret. Please see below attached screenshot.
var opObj = {
"1": "Unlimited",
"2": "Exact number",
"3": "Range"
};
var idName = "Select", qNo="01", label="Selection limits";
var tag = "<div class='md-form'>\
<select id='" + idName + qNo + "' class='mdb-select' searchable='Search here...'>\
<option value='' disabled selected>" + label + "</option>";
$.each(opObj, function (key,val) {
tag += "<option value='" + key + "'>" + val + "</option>";
});
tag += "</select>";
tag += "</div>";
tag = $(tag);
tag.appendTo($("#MyDiv"));
$('.mdb-select').materialSelect();
Marta Wierzbicka staff answered 5 years ago
Hi,
where is your material select initialization script? I don't see it in the given demo. And I see you use very old Bootstrap version - 3.3.7. Please use the newest version of our package. As you can see in my snippet where every link and script is the newest, if you use our basic HTML and JS code, then material select works correctly: https://mdbootstrap.com/snippets/jquery/marta-szymanska/258119. Please, check your own code if everything looks like the newest version in the MDB package.
Best,
Marta
NitinMistry free answered 5 years ago
Thanks Marta. Yes, bootstrap v3.3.7 that I was using was causing the double caret issue. I upgraded to the latest v4.1.3 and it is now working as expected.
NitinMistry free answered 5 years ago
Hi Marta,
Thanks for your reply. I have checked my code and I am positive I'm initializing the materialSelect() method only once after the component has been dynamically added to the DOM. Can you please suggest what could be wrong or some hack to resolve this?
You can check the result at... https://prototype.womb.healthcare/sf365/html/test.html
Marta Wierzbicka staff answered 5 years ago
Hi,
you have to add only one initialization of material select. If you add the select like in our documentation, it will work fine. Please, look at my snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/258119.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: Desktop
- Browser: Chrome 71.0.3578.98 (64-bit)
- OS: Windows 8.1
- Provided sample code: Yes
- Provided link: Yes