Search code examples
meteormaterialized

materialized / meteor - select form is not working

I'm trying to use materialized select form on my Meteor app but it seems not working....

Here is my code:

html

<template name="createAutomatedaction">
    <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
</template>

js

Template.createAutomatedaction.onRendered(function(){
  this.$('select').material_select();
});

When I click select form, dropdown doesn't show up. Could anyone advise me what i'm missing by any chance? Your help would be really appreciated.

with this https://www.dropbox.com/s/nzh7sp5x7by6e1t/Screenshot%202015-05-09%2018.20.54.png?dl=0

without this https://www.dropbox.com/s/e1asl3y5pbtg5yp/Screenshot%202015-05-09%2018.24.08.png?dl=0

Solution

  • The correct code to initialize the select is this (assuming 'createAutomatedaction' is your template's name)

    Template.createAutomatedaction.onRendered(function() {
  $('select').material_select();
});

    If you are using the last (at the time of writing) version of materialize (v0.97.2) there is a bug that causes the dropdown not to be generated fixed on this commit.

    If you want to quickly fix it manually, grab the unminified js from their repo (dist/js/materialize.js) and replace every instance of '$body' for 'bodyElement' and use that.

    Selects will work.