Materialize CSS - Select Doesn't Seem to Render

Question

I am currently working with materialize CSS and it seems I\'ve gotten snagged with the select fields.

I\'m using the example provided from their site but unfortunate

Answer 1

Call the materialize css jquery code only after the html has rendered. So you can have a controller and then fire a service which calls the jquery code in the controller. This will render the select button alright. How ever if you try to use ngChange or ngSubmit it may not work due to the dynamic styling of the select tag.

Answer 2

If you're using Angularjs, you can use the angular-materialize plugin, which provides some handy directives. Then you don't need to initialize in the js, just add material-select to your select:

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

Answer 3

The solution that worked for me is by calling the 'material_select' function after the options data has been loaded. If you print out the value of OptionsList.find().count() to the console it's first 0 then a few milliseconds later the list gets populated with data.

Template.[name].rendered = function() {
    this.autorun(function() {
        var optionsCursor = OptionsList.find().count();
        if(optionsCursor > 0)
        {
            $('select').material_select();
        }
    });
};

Answer 4

Only this worked for me:

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});

Answer 5

This worked for me, no jquery or select wrapper with input class, just material.js and this vanilla js:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

As you can tell I got the materialize css actual style and not the browsers default.

Answer 6

For me none of the other answers worked because I am using the latest version of MaterializeCSS and Meteor and there is incompatability between the jquery versions, Meteor 1.1.10 uses jquery 1.11 (overriding this dependancy is not easy and will probably break Meteor/Blaze) and testing Materialise with jquery 2.2 works fine. See https://stackoverflow.com/a/34809976/2882279 for more info.

This is a known issue with dropdowns and selects in materialize 0.97.2 and 0.97.3; for more info see https://github.com/Dogfalo/materialize/issues/2265 and https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

I'm using the Sass version of MaterializeCSS in Meteor and worked around the problem by using poetic:materialize-scss@1.97.1 in my meteor packages file to force the old version. The dropdowns now work, old jquery and all!