1

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

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

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

1.VIEW(test.html.slim)

= 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"]
            | トッピック

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

2.生成されたHTML

<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>

3.JavaScript(Common.js)

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

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

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

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

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

1 件の回答 1

-1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。