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 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    lt div class  row  gt   lt form class  col s12  gt       lt div class  row  gt           lt div class  input-field col s2  gt  lt  div gt           lt div class  input-field col s5  gt               lt input id  icon prefix  type  text  class  validate    gt               lt label for  icon prefix  gt Search lt  label gt           lt  div gt           lt div class  input-field col s3  gt               lt label gt Materialize Select lt  label gt               lt select gt                   lt option value    disabled  disabled  selected  selected  gt Choose your option lt  option gt                   lt option value  1  gt Option 1 lt  option gt                   lt option value  2  gt Option 2 lt  option gt                   lt option value  3  gt Option 3 lt  option gt               lt  select gt           lt  div gt           lt div class  input-field col s2  gt  lt  div gt       lt  div gt   lt  form gt

User · Answer

I found myself in a situation where using the solution selected

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

for whatever reason was throwing errors because the material_select() function could not be found. It was not possible to just say <select class="browser-default... Because I was using a framework which auto-rendered the the forms. So my solution was to add the class using js(Jquery)

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

User · Answer

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   formSelect           Old way           select   material select         after you ve loaded that file

User · Answer

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

User · Answer

This works too  class    browser-default

User · Answer

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  gt  0                           select   material select

User · Answer

For default browser     lt head gt       select               display  inline  important              lt  head gt    Or the Jquery solution after the link t Jquery library and your local CDN materialize files   lt script gt   function         function           Plugin initialization        select   not   disabled   formSelect              jQuery      end of jQuery name space   I really like this framework  but what on earth to have display none

User · Answer

Just to follow up on this since the top answer recommends not using materializecss    in the current version of materialize you no longer need to initialize selects

User · Answer

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    lt div input-field gt       lt select class    ng-model  select value1  material-select gt           lt option ng-repeat  value in select choices  gt   value   lt  option gt       lt  select gt   lt  div gt

User · Answer

Only this worked for me     document  ready function           select   not   disabled   formSelect

User · Answer

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

User · Answer

First  make sure you initialize it in document ready like this     document  ready function             select   material select          Then  populate it with your data in the way you want  My example       function FillMySelect myCustomData               mySelect   html                 each myCustomData  function  key  value                   mySelect   append   lt option value      value id     gt     value name     lt  option gt                     Make sure after you are done with the population  to trigger this contentChanged like this       mySelect   trigger  contentChanged

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Materialize CSS - Select Doesn't Seem to Render

Examples related to javascript

Examples related to html

Examples related to css

Examples related to materialize