Hi
I bought MDB3 so that I can use the Premium Select input. I followed the instructions and as a result, here is what my code looks like:
<script>
// Material Select Initialization
$(document).ready(function () {
$('select').material_select();
});
</script>
<div class="col-sm-6">
<div class="form-group">
<label for="fActive">Status</label>
<select class="fActive" name="fActive">
{% if customer.b_active %}
<option value="1" selected>Active</option>
<option value="0">Suspended</option>
{% else %}
<option value="1">Active</option>
<option value="0" selected>Suspended</option>
{% endif %}
</select>
</div>
</div>
*I normally put the initialization in the header file but for readability, I put it just directly before my select code*
When I see the page on the browser, I can see the that the default select has been replaced with the MT looking select. However, when I clicked the select, it wasn't revealing anything. I checked the select element with inspection tools in Chrome, and indeed there were changes made to the html elements when I clicked the select button.
Is there any missing steps here? Can someone guide me in solving the issue?
Hi,
It ok.
Check if you have the correct version of plugins:
jQuery version 1.11.1,
bootstrap version 3.3.5,
MDBootstrap version 3.4.1
Check also if you import all in a correct order.
In head:
1. bootstrap.css
2. mdb.css
Before body closing tag:
1. jQuery
2. bootstrap.js
3. mdb.js
4. your script which initializes material select
Regards
I don't think that's a problem. The template engine is just for writing the scripts to be sent to the client's browser - the browser has no awareness of whether it is being written by hand or by template engine.
And I have tried and confirmed that indeed it was not the case.
I was suspecting that the reason for the bug maybe has something to do with imports. I imported Bootstrap 3 before MDB 3 - is this okay?
Hi,
The reason of that bug can be your template engine.
Can you check if it works in the clear HTML file?
Regards
Hi. Thank you for your explanation.
I have tried your suggestion but I still could not produce different results. There were no visible changes in the view even though the DOM has been manipulated.
Here is a snapshot of the select html element before/after the click.
Before click:
<div class="select-wrapper fActive">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-bce7cb17-47ad-9586-4cb5-c2ee13808760" value="Active">
<ul id="select-options-bce7cb17-47ad-9586-4cb5-c2ee13808760" class="dropdown-content select-dropdown ">
<li class="">
<span>Active</span>
<li class="">
<span>Archived</span>
<select class="fActive initialized" name="fActive">
<option value="1" selected="selected">Active</option>
<option value="0">Archived</option>
</select>
</div>
After click:
<div class="select-wrapper fActive open">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-bce7cb17-47ad-9586-4cb5-c2ee13808760" value="Active" aria-expanded="true">
<div class="dropdown-backdrop"></div>
<ul id="select-options-bce7cb17-47ad-9586-4cb5-c2ee13808760" class="dropdown-content select-dropdown ">
<li class="">
<span>Active</span>
<li class="">
<span>Archived</span>
<select class="fActive initialized" name="fActive">
<option value="1" selected="selected">Active</option>
<option value="0">Archived</option>
</select>
</div>
Hi,
With
</body> i meant, to place all your scripts before body closing tag and after content, something like this:
<!DOCTYPE html>
<html lang="en">
<head>
[link, meta and other stuff]
</head>
<body>
[some content]
<div class="col-sm-6">
<div class="form-group">
<label for="fActive">Status</label>
<select class="fActive" name="fActive">
<option value="1" selected>Active</option>
<option value="0">Suspended</option>
<option value="1">Active</option>
<option value="0" selected>Suspended</option>
</select>
</div>
</div>
[more content]
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('select').material_select();
});
</script>
</body>
</html>
Check if material select will work without you template engine markdown:
{% if customer.b_active %}
{% else %}
{% endif %}
Regards
Thanks for your reply. Although, I am not quite sure what you meant here - </body> itself and anything after the body are all still html code but you said I should put it before </body> and after all html code. I did put the initialization script before body and indeed I have seen the the select input turned into Material design component. However, I cannot interact with the select input (I cannot click on it and see other options).
Can I get more clarifications on this? I appreciate all the help.
Hi,
All scripts should be placed before </body>, after all, html code.
In your code material select is trying to be initialized but any of them can be found because not all HTML file is a load.
Regards
I am using the Pro version
Hi, michaelenglo!
Title was changed ;) What's your version of MDB? Do you use MDB Free or Pro?
Sorry for the title typo. Can the admins edit it to "Select doesn't work in MDB3". I can't find the edit option here.
