Topic: MDBootstrap Select CSS causing conflict with existing CSS

alte pro asked 5 years ago


I'm trying to have MDBootstrap's Bootstrap Select for dropdown choices on my site and have been following instructions listed here:

https://mdbootstrap.com/javascript/material-select/

Here is the code I'm using to get the dropdown select.

<select class="mdb-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Example label</label>

The instructions on that page also said to insert this JS snippet
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').material_select();
});

But when I render the page I get:

Deferred exception: $(...).material_select is not a function

So I added material.js and material.css in my page and this messes up the mdbootstrap CSS and JS files and causes buttons to change color, layout to change among other issues. If I don't include the materialize.css and JS files, the dropdown select will not work. Can you please help me with this?

I'm using these versions:

1. bootstrap.min.css – 4.0.0

2. mdb.min.css – 4.4.1

3. jquery.min.js – 3.2.1

4. bootstrap.min.js – 4.0.0

5. mdb.min.js – 4.4.1

 


Marta Wierzbicka staff answered 5 years ago


Hi, could you send me your file with this problem to m.szymanska@mdbootstrap.com? Best, Marta

alte pro commented 5 years ago

Actually, never mind, I got it working now! Thank you so much for responding though!

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
Tags