

現在、以下の環境で開発を行っています。  
Ruby：2.3.1  
Rails：5.0.0

MaterializeCSSを使用しているのですが、Selectボックスがどうしても動かない状態です。表示はされるのですが、プルダウンできない状態になります。

調査すると、JavaScriptのコードを追加すれば解決するというものが多いのですが、JavaScriptのコードは追加済みで、コードそのものは実行されていることを確認済みです。

**1.VIEW（test.html.slim）**

[code]

    = form_for @test , html: {class: 'col s12' } do |f|
    　　.input-field.col.s6
          = f.select :topic, Test::TOPICS, {:prompt => ''}, :id => 'topic_area'
              label[for="topic_area"]
                | トッピック
    
[/code]

※Testはモデルで、TOPICSという配列が定義されています。

**2.生成されたHTML**

[code]

    <form class="col s12" id="new_test" action="/test" accept-charset="UTF-8" method="post">
      <div class="input-field col s6">
        <select id="topic_area" name="test[topic]">
          <option value=""></option>
          <option value="test1">test1</option>
          <option value="test2">test2</option>
          <option value="test3">test3</option>
        </select>
        <label for="topic_area">トピック</label>
      </div>
    </form>
    
[/code]

**3.JavaScript(Common.js)**

[code]

    $(document).ready(function(){
      $('select').material_select();
    });
    
[/code]

ちなみに、Selectボックスに"browser-default"をクラス指定すれば動くようにはなります。

また、Selectボックス以外のJavaScriptを使用する部分については問題なく動作しているため、MaterializeのJS含め、JavaScript(jQuery)は問題なく読み込まれている認識です。

また、Bootstrapも使用しているのですが、相性の問題とかも考えられるでしょうか。

以上です。ご教示頂けると助かります。宜しくお願い致します。


CC BY-SA 3.0
2017-07-09T02:02:24.723
36207
2017-11-03T16:25:59.017
23902
question
ruby-on-rails ruby css
MaterializeCSSを使用した場合にRailsのSelectボックスが動作しない


bootstrapは競合するので，どちらかに絞ることをお勧めします．  
nav等も競合するので気をつけてください．

scaffoldでなにか作成した場合に生成される `/assets/stylesheets/scaffold.css`
にも気をつけてください．いろいろ影響が出ます．


CC BY-SA 3.0
2017-11-03T16:20:19.460
39275
2017-11-03T16:25:59.017
2017-11-03T16:25:59.017
26042
26042
36207
answer