Select not rendering in Materialize CSS and AngularJS

Question

I am using Materialize CSS for my Angular application and for some reason, the <select> element fails to render (nothing visible; though when I right click to inspect element, I can see the <select> right there). However, when I apply class = "browser-default" to it, it starts working. As in a previous answer, I have also included

$(document).ready(function() {
    $('select').material_select();
});

after loading all js files. Yet, it doesn't seem to work. Any idea what the possible issue can be?

Edit: Here's the related documnetation: http://materializecss.com/forms.html

Getting any console error ?

Vineet
– Vineet

2015-07-08 18:26:54 +00:00
Commented Jul 8, 2015 at 18:26 — Vineet
– Vineet, Commented Jul 8, 2015 at 18:26
@Vineet nope, seems to me like a CSS issue than a JS one

Ranveer
– Ranveer

2015-07-08 18:27:58 +00:00
Commented Jul 8, 2015 at 18:27 — Ranveer
– Ranveer, Commented Jul 8, 2015 at 18:27

Community · Accepted Answer · 2017-05-23 11:54:51Z

1

As in the answer found in: Materialize CSS - Select Doesn't Seem to Render

You have to initialize the select using the JS code:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Aug 7, 2015 at 19:34

Erick Mendonça

1211 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Roub · Accepted Answer · 2017-05-06 21:18:07Z

You need to call $('select').material_select(); after angular to load your select, for example:

you have a select like this:

<div class="input-field col s12">
    <select ng-model="year" ng-options="year for year in years">
        <option value="" disabled selected>Select a year</option>
    </select>
    <label>Year</label>
</div>

When you are loading the list of years in your controller, you must use setTimeout to delay execution of the method $('select').material_select(). See below:

function generateYears() {
    var years = [];
    var currentYear = new Date().getFullYear();
    for (var year = currentYear; year >= 1900; year--) {
        years.push(year);
    }

    $scope.years = years;

    setTimeout(function () {
        $('select').material_select();
    }, 200);
}

With this the materialize select will work

Collectives™ on Stack Overflow

Select not rendering in Materialize CSS and AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related