materialized / meteor - select form is not working

Question

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

Thank you for your reply. As you can see (I edited my question), with this shows select form and without this doesn't show select form...so without this doesn't seem to work. — Masato, May 10 '15 at 01:27

ThadeuLuz · Accepted Answer · 2016-04-04T18:56:38.760

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.

score 0 · Answer 2 · edited Oct 31 '15 at 10:04

0

Place your jquery code in a template event:

Template.templatename.events({
      this.$('select').material_select();
});

Hope it works

edited Oct 31 '15 at 10:04

Dimitris Fasarakis Hilliard

150,925
31
268
253

answered Oct 31 '15 at 09:54

Tevin Thuku

437
1
8
19

score 0 · Answer 3 · edited Mar 13 '16 at 22:58

0

Adding class="browser-default" in the select tag worked for me.

edited Mar 13 '16 at 22:58

Torsten Scholz

856
1
9
22

answered Mar 13 '16 at 21:24

lagfvu

597
6
21

score -1 · Answer 4 · edited Mar 15 '18 at 16:57

-1

I removed class="input-field" and it worked for me.

edited Mar 15 '18 at 16:57

Robert Columbia

6,313
15
32
40

answered Mar 15 '18 at 16:51

Sifb71

41
10

materialized / meteor - select form is not working

html

js

4 Answers4