Select doesn’t work in MDB3

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Select doesn’t work in MDB3

michaelenglo pro asked 7 years ago

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?

michaelenglo pro answered 7 years ago

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.

Bartłomiej Malanowski staff pro premium answered 7 years ago

Hi, michaelenglo! Title was changed ;) What's your version of MDB? Do you use MDB Free or Pro?

michaelenglo pro answered 7 years ago

I am using the Pro version

Rafał Rogulski answered 7 years ago

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

michaelenglo pro answered 7 years ago

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.

Rafał Rogulski answered 7 years ago

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

michaelenglo pro answered 7 years ago

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>

Rafał Rogulski answered 7 years ago

Hi, The reason of that bug can be your template engine. Can you check if it works in the clear HTML file? Regards

michaelenglo pro answered 7 years ago

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?

Rafał Rogulski answered 7 years ago

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
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

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
mdb3
Related topics
0
Bootstrap 3 File
About author
michaelenglo
Pro User
10Support score
1Questions 5Answers
0Snippets likes 0Snippets