Why does .mdb-select not apply any styling?

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Why does .mdb-select not apply any styling?

ctote asked 7 years ago

I'm following this tutorial: https://mdbootstrap.com/javascript/bootstrap-multiselect/

However, when I attempt exactly as shown, no styling is applied. Here's my basic example:

```

<!DOCTYPE html>

<html lang="en">

<head>

<!-- MDB Styles -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.4/css/mdb.min.css">

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Bootstrap JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Latest compiled JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.4/js/mdb.min.js"></script>

</head>

<body>

<div id='advancedOptions'>

<select class="mdb-select" multiple>

<option value=\"\" disabled selected>Datacenter</option>

<option value=\"bio-dub\">bio-dub</option>

<option value=\"ea-ams\">ea-ams</option>

<option value=\"ea-iad\">ea-iad</option>

<option value=\"rs-iad\">rs-iad</option>

<option value=\"rs-lhr\">rs-lhr</option>

<option value=\"rs-ord\">rs-ord</option>

<option value=\"unknown\">unknown</option>

</select>

</div>

</body>

</html>

```

ctote commented 7 years ago

Not sure why code blocks aren't working - here's a link: https://gist.github.com/calebtote/e201344b9aa0cbbaffd39e5676eccaa5

Jakub Strebeyko staff answered 7 years ago

Hi there ctote, Your code seems all right to be taken and turned into a material select multiselect, except one thing. Remember, that to apply this dynamic, JS-based styling, it is necessary to initiate it first in your .js file, like so: // Material Select Initialization $(document).ready(function() { $('.mdb-select').material_select(); }); With Best Regards, Kuba
Write
Create snippet
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
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
ctote
0Support score
1Questions 0Answers
0Snippets likes 0Snippets