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();

Select component with 2 carets visible


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


Marta Wierzbicka staff answered 5 years ago


Hi,

you're welcome.

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



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

  • 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