Material select does not work

Topic: Material select does not work

diangh pro asked 5 years ago

Hi, I bought the MDB Pro version yesterday and I'm working on my first project with the Pro components. For some reason I can't get the select/multi-select to work. It displays only the label of the select and nothing else. I've added the initiation script. I'm pretty sure it does not recognize the materialSelect(). I've even tried linking the js/addons/material-select.js manually to my html file but still no luck. What could be the problem? Regards, diangh

Piotr Glejzer staff commented 5 years ago

Hi diangh, may you show me your code? Because It might make it simpler. Best, Piotr

diangh pro commented 5 years ago

My mistake - I meant js/modules/...

Add comment

diangh pro answered 5 years ago

0 0 Best answer

<pre>Start your code here</pre>

<form class="text-center" style="color: #757575;">

<div class="md-form mt-3">
<input type="text" id="materialContactFormName" class="form-control">
<label for="materialContactFormName">Name</label>
</div>

<div class="md-form">
<input type="email" id="materialContactFormEmail" class="form-control">
<label for="materialContactFormEmail">E-mail</label>
</div>

<div class="md-form">
<span>This select does not</span>
<select class="mdb-select">
<option value="" disabled>Choose option</option>
<option value="1" selected>Feedback</option>
<option value="2">Report a bug</option>
<option value="3">Feature request</option>
<option value="4">Feature request</option>
</select>
</div>

<div class="md-form">
<textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea>
<label for="materialContactFormMessage">Message</label>
</div>

<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialContactFormCopy">
<label class="form-check-label" for="materialContactFormCopy">Send me a copy of this message</label>
</div>

<button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button>

</form>

....

<script>
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
</script>

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="js/popper.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>

Please insert min. 20 characters.

Start your code here

<form class="text-center" style="color: #757575;">  <div class="md-form mt-3"> <input type="text" id="materialContactFormName" class="form-control"> <label for="materialContactFormName">Name</label> </div>  <div class="md-form"> <input type="email" id="materialContactFormEmail" class="form-control"> <label for="materialContactFormEmail">E-mail</label> </div>  <div class="md-form"> <span>This select does not</span> <select class="mdb-select"> <option value="" disabled>Choose option</option> <option value="1" selected>Feedback</option> <option value="2">Report a bug</option> <option value="3">Feature request</option> <option value="4">Feature request</option> </select> </div>  <div class="md-form"> <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea> <label for="materialContactFormMessage">Message</label> </div>  <div class="form-check"> <input type="checkbox" class="form-check-input" id="materialContactFormCopy"> <label class="form-check-label" for="materialContactFormCopy">Send me a copy of this message</label> </div>  <button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button> </form>  ....  <script> // Material Select Initialization $(document).ready(function() { $('.mdb-select').materialSelect(); }); </script>  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script>

Piotr Glejzer staff commented 5 years ago

You need initiate materialSelect(); script below all main scripts like jquery/popper/bootstrap/mdb.min.js . The browser reads the page code from top to bottom, if you are doing like that the code dosen't work becasue it wants work but the jquery and mdb.min.js is not loaded yet so it code dosen't have opporunity to start working.


<!– SCRIPTS –>
<!– JQuery –>
<script type=”text/javascript” src=”js/jquery-3.3.1.min.js”></script>
<!– Bootstrap tooltips –>
<script type=”text/javascript” src=”js/popper.min.js”></script>
<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<!– MDB core JavaScript –>
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script>
// Material Select Initialization
$(document).ready(function() {
$(‘.mdb-select’).materialSelect();
});
</script>

Please insert min. 15 characters.

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

diangh

Pro User 10Support score
1Questions 1Answers 0Snippets