MDB Bootstrap Support


Topic: MDB Bootstrap Support

NitinMistry pro premium asked 9 months 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();

Select component with 2 carets visible


Marta Szymanska staff answered 9 months 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


Marta Szymanska staff answered 9 months 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


NitinMistry pro premium answered 9 months 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

 


NitinMistry pro premium answered 9 months 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.


Marta Szymanska staff answered 9 months ago

Hi,

you're welcome.

Best,

Marta


Please insert min. 20 characters.