Topic: Why does .mdb-select not apply any styling?
ctote free asked 6 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>
```
Jakub Strebeyko staff answered 6 years ago
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
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: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
ctote free commented 6 years ago
Not sure why code blocks aren't working - here's a link: https://gist.github.com/calebtote/e201344b9aa0cbbaffd39e5676eccaa5