Materialize CSS - Select Doesn't Seem to Render

materialize select not working
materialize select get value
select css
materialize select dropdown with search
materialize dropdown not working
materialize select on change
materialize multiple select set value
materialize select set value

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 unfortunately it it's rendering in the view whatsoever. I was wondering if someone else might be able to help.

What I am trying to do is create a row with 2 end spacers that provide padding - then within the inner two row items there should be a search text input and a search select dropdown.

This is the example I'm working from: http://materializecss.com/forms.html

Thank you in advance.

Here is the snippet of code in question.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and then call

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

after you've loaded that file.

Materialize CSS - Select Doesn't Seem to Render, Because they override the browser default, the select styling needs Javascript to run. You need to include the Materialize Javascript file, and  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.

The design of select functionality in materialize CSS is, in my opinion, a pretty good reason not to use it.

You have to initialize the select element with material_select(), as @littleguy23 mentions. If you don't, the select box is not even displayed! In an old-fashioned jQuery app, I can initialize it in the document ready function. Guess what, neither I nor many other people are using jQuery these days, nor do we initialize our apps in the document ready hook.

Dynamically created selects. What if I am creating selects dynamically, such as happens in a framework like Ember which generates views on the fly? I have to add logic in each view to initialize the select box every time a view is generated, or write a view mixin to handle that for me. And it's worse than that: when the view is generated, and in Ember terms didInsertElement is called, the binding to the list of options for the select box may not have been resolved yet, so I need special logic observing the option list to wait until it's populated before making the call to the material_select. If the options change, as they easily might, material_select has no idea about that and does not update the dropdown. I can call material_select again when the options change, but it appears that that does nothing (is ignored).

In other words, it appears that the design assumption behind materialize CSS's select boxes is that they are all there at page load, and their values never change.

Implementation. From an aesthetic point of view, I am also not in favor of the way materialize CSS implements its dropdowns, which is to create a parallel, shadow set of elements somewhere else in the DOM. Granted, alternatives such as select2 do the same thing, and there may be no other way to achieve some of the visual effects (really?). To me, though, when I inspect an element, I want to see the element, not some shadow version somewhere else that somebody magically created.

When Ember tears down the view, I am not sure that materialize CSS tears down the shadow elements it has created. Actually, I'd be quite surprised if it does. If my theory is correct, as views are generated and torn down, your DOM will end up getting polluted with dozens of sets of shadow dropdowns not connected to anything. This applies not only to Ember but any other MVC/template-based OPA front-end framework.

Bindings. I also have not been able to figure out how to get the value selected in the dialog box to bind back to anything useful in a framework like Ember that invokes select boxes through a {{view 'Ember.Select' value=country}} type interface. In other words, when something is selected, country is not updated. This is a deal-breaker.

Waves. By the way, the same issues apply to the "wave" effect on buttons. You have to initialize it every time a button is created. I personally don't care about the wave effect, and don't understand what all the fuss is about, but if you do want waves, be aware that you'll spend a good portion of the rest of your life worrying about how to initialize every single button when it's created.

I appreciate the effort made by the materialize CSS guys, and there are some nice visual effects there, but it's too big and has too many gotchas such as the above to be something that I would use. I'm now planning to rip out materialize CSS from my app and go back either to Bootstrap or a layer on top of Suit CSS. Your tools should make your life easier, not harder.

when using materialize.css select element does not appear, I have created select examples with materialize.css check it out here. <html> <​head> <title>The Materialize Selects Example</title> <meta  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.

@littleguy23 That is correct, but you don't want to do it to multi select. So just a small change to the code:

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

Materialize - Selects, The following example demonstrates different types of select options. "https://​cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script​  Materialize CSS - Select Doesn't Seem to Render Tag: html , css , materialize I am currently working with materialize CSS and it seems I've gotten snagged with the select fields.

This works too: class = "browser-default"

Materialize Select Dropdown Not Working · Issue #374 , Just the regular single select dropdown is not working for me. see here the documentation on dropdown: http://materializecss.com/dropdown.html Is there a possibility to manually initialise the component, or does anyone  It doesn't support changing content within the select, add the class browser-default if you want that. If you add the attribute watch, then the material-select will re-initialize whenever something changes in the content within the select. That includes if the number of list elements change.

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>

How to get selected option from material_select · Issue #2877 , Not a bug, but a question: materialize creates a ul from simple select-element, I tried to set the selected value with $("#id").val("value") ,but it doesnt work out. So, I had three regular tabs. In first tab, the input select dropdown works. In the 2nd tab, the input select dropdown did not work. After I turned the tabs into tab-like nav with links to three children routes, all the dropdowns across different tabs work.

MaterializeCSS - Select, <select>. 4. <option value="" disabled selected>Choose your option</option>. 5. <option value="1">Option 1</option>. 6. <option value="2">Option 2</option>. Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well. The data is a json object where the key is the matching string and the value is an optional image url. This is the default compareFunction. You can write your own compareFunction by

How to dynamically modify <select> in materialize css framework , How to dynamically modify <code><select></code> in materialize css framework. 29. </a>. 30. </div>. JavaScript + No-Library (pure JS) Tidy. 32. 1. settings. Easy to work with. We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.

iPhone Questions, Materialize CSS – Select Doesn't Seem to Render. windows phone live. This question has received: 19 Votes. I am currently working with materialize CSS and it  Trying to get selected value on Materialize CSS select element at close. Something like this: $('input.select-dropdown').on('close', function() { console.log($(this).val()); }); just doesn't work, because shows last selected value. First time shows nothing, and next time shows selected value first time.

Comments
  • Otherwise you can use the browser default and not initialisation is required: <select class="browser-default">
  • Latest changelog says this: Rename plugin call .material_select() to .formSelect()
  • Don't write this in $( document ).ready(function() { otherwise it won't work
  • Sheesh! I've beating my head against a brick wall for hours trying to figure this out... Thanks....
  • Thank you for the extensive response. It's very informative and I agree with a lot of the sentiments you've expressed. I do really like materialize CSS and their approaches with a lot of things. I get exactly what you're saying and have been thinking a lot about all the 'effects' modern apps will demand. I'm not sure those types of designs and concepts fit into large scale software just yet. I sure do like the look and concepts though. Thank you again.
  • Great response. Running into SELECT issues with Materialize as well, like click events on the scrollbar dismissing the OPTIONs list. @torazaburo What did you end up going with? Back to Bootstrap?
  • @SeanO for now, yes.
  • I spent enough time on converting my most of web pages and forms to materialize, but now stuck in how to solve the select issue. Its really bad, the materializecss has huge traffic but still do not solve this minor issue. If you are evaluating to use it for some consumer product, wait until it mature
  • You can use <select class="browser-default"> and you will NOT have to initialise with js and you will have the native UI that the user is accustomed to. JS initialisation is going to be required for any implementation that doesn't use the native UI.
  • Why? If we exclude multiple select fields, they won't work.
  • Nice find Brandiqa! I had called $('select').material_select(); from AppComponent.ngOnInit(), but you need to call it after the <select/> html is rendered, which I did in dropdown.component.ts. The fix was to call it from ngOnInit() within whichever component uses the dropdowns.
  • I'm using version 0.95.3 and I still have to initialize selects. Am I doing something wrong?
  • You still need to initialize (non-browser-default) SELECTs in v0.96.1.
  • Downvote: they are in v0.97.1 and you still need to initialise selects with javascript.
  • 0.100.2: selects need to be initialized. There's no evidence that this answer has ever been correct.