常連

Materializeを使って、以下のようなプルダウンを作成しております。
![イメージ説明](87cc64677c3618af6fa2d539869cf27e.png)

**■起きている問題**
PCで操作した際は問題なく動作・反応してくれるのですが、スマートフォンで操作しようとするとうまく動作せず困っております。。
例えば、「ユーザー３」を選択したくて上記画像の灰色の部分を指でタップしても、「ユーザー３」が選択されずに値が「ご自身のニックネームを選択ください」のままで残ったり、たまに反応しても下の「ユーザー４」や「ユーザー５」が選択されてしまうといった状態です。

該当のコードは以下の通りです（ブラウザに表示されたもの）

```HTML
<div class="input-field input-field--size">
    <form method="post" action="********">
        <input type="hidden" name="csrfmiddlewaretoken" value="*****">
        
            <div class="select-wrapper">
                <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-*****">
                    <ul id="select-options-*****" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 304px; left: 0px; top: -254px; height: 300px; transform-origin: 0px 100%; opacity: 1; transform: scaleX(1) scaleY(1);">
                        <li class="disabled" id="select-options-*****" tabindex="0"><span>ご自身のニックネームを選択ください</span></li>
                        <li id="select-options-*****" tabindex="0" class=""><span>メンバー１</span></li>
                        <li id="select-options-*****" tabindex="0"><span>メンバー２</span></li>
                        <li id="select-options-*****" tabindex="0" class="selected"><span>メンバー３</span></li>
                        <li id="select-options-*****" tabindex="0"><span>メンバー４</span></li>
                        <li id="select-options-*****" tabindex="0" class=""><span>メンバー５</span></li>
                    </ul>
                    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                    <select name="evaluator_id" tabindex="-1">
                        <option value="" disabled="" selected="">ご自身のニックネームを選択ください</option>
                        <option value="54">メンバー１</option>
                        <option value="55">メンバー２</option>
                        <option value="56">メンバー３</option>
                        <option value="57">メンバー４</option>
                        <option value="58">メンバー５</option>
                    </select>
            </div>
        <button type="submit" class="btn blue accent-3 btn-blue btn-size waves-effect waves-light">OK</button>
    </form>
</div>
```

Materializeで実装された[他のプルダウン](https://shimabox.net/sample/materialize-material_select/index.html)（別の方のブログで公開されていたものです）を同じスマホで触って見たところ、こちらは問題なく反応していたので、私の記述したコードの方に問題があるはずなのですが、原因がわからず質問させていただきました。

materializeだとこの辺りをチェックした方が良い等のアドバイスや、何かヒントをご存知の方がいらっしゃいましたら、ぜひご教示いただけますと幸いです。
何卒よろしくお願い致します。

**■環境について**
・Materializeのバージョン： 1.0.0

Materializeを使って作成したselectタグのプルダウンが、スマホの時だけうまく反応しない

Materializeでセレクトボックスが反映されません。
調べてみるとinitializationを書かなければならないようなのですが、JavaScriptを使ったことがなくどのように描けば良いかわかりません。

公式ホームページ
[https://materializecss.com/select.html](https://materializecss.com/select.html)

language-javascript
```ここに言語を入力
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });
```

自分でlanguage-javascript.jsを作らなければならないのでしょうか。
詳しい人がいれば教えてくださると光栄です

Materializeのinitializationのやり方

### 前提・実現したいこと
Materialize CSSのDate Pickerをローカライズ（日本語化）しましたが、レイアウトが変なので変更したいです。（デフォルトのCSSを変更？）
[MaterializeCSSのDate Pickerを日本語化する](https://chi-bd.hatenadiary.org/entry/20151103/1446543720)を参考にしました。
難しいレイアウトをしたいわけではなく、参考にしたサイトのレイアウトになれば十分なのです。特に緑色の背景の部分の見栄えが良くないので変更したいのです。

### 発生している問題・エラーメッセージ
![イメージ説明](8a74703c7bf1da587603efce8d090239.png)
![イメージ説明](493990d2bd3650ca1499ca69fc6a50e9.png)

### 該当のソースコード

```jQuery
  $(".datepicker").datepicker({
    autoClose:true,
    format: "yyyy-mm-dd",
    i18n:{
      months:  ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      weekdays: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
      weekdaysShort: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
      weekdaysAbbrev: ["日", "月", "火", "水", "木", "金", "土"],
      nextMonth: "翌月",
      previousMonth: "前月",
      labelMonthSelect: "月を選択",
      labelYearSelect: "年を選択",
      setDefaultDate:true,
      cancel:'キャンセル',
      clear: 'クリア',
      done: 'OK',
      close: "閉じる",
      format: "yyyy-mm-dd",
    }
  });
```

### 補足情報（FW/ツールのバージョンなど）

Materialize CSS 1.0.0
Ruby on Rail 6
Docker

Materialize CSSのDate Pickerのレイアウトを変更したい

### 前提・実現したいこと

Djangoのテンプレートでmodelのデータ一覧を表示し、チェックボックスで選択したデータを削除するページ（index.html）を作成しています。
削除前の確認ダイアログを当初tkinterで簡易表示していましたが、Materializeのモーダルに変更することになりました。

- チェックボックスの値をPOSTで受け取り、削除対象データ一覧を表示するページ（answer.html）を更新

- 「削除する」ボタンクリックで、モーダルタグの内部にanswer.htmlをAjaxで読み込み、モーダルウィンドウで削除確認画面を表示

上記のような動作にしたかったのですが、試したところボタンクリック1回ではanswer.htmlが読み込まれただけで、モーダルは非表示のままでした。同じボタンをもう1回クリックしないとモーダルが表示されません。

2回クリックしなければならない以外は一応希望の動作ではありますが、クリックの問題がなかなか解消できません。
ワンクリックでAjaxとモーダル両方を起動する方法がありましたら、ご教示いただけないでしょうか。
よろしくお願いいたします。

### 発生している問題・エラーメッセージ

クリック1回ではAjaxが読み込まれるだけでモーダルが表示されず、同じボタンをもう1回クリックしなければならない。

### 該当のソースコード

```HTML
templates/index.html

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
    <form id="fm_del_ids" name="fm_del_ids" action="answer" method="POST">
    {% csrf_token %}

    <table>  
    {% for item in log %}
    <tr>
        <td>
        <label>
            <input type="checkbox" class="filled-in" name="del_ids" value="{{item.id}}" />
            <span></span>
        </label>
        </td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.group}}</td>
    </tr>
    {% endfor %}      
    </table>

    
    <button id="btn_del" data-target="modal1" class="btn modal-trigger" type="submit">
    チェックしたデータを削除する
    </button>
    </form>

    <span id="div_response"></span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
$("#fm_del_ids").submit(function(event) {
        event.preventDefault();
        var form = $(this);
        $.ajax({
          url: form.prop("action"),
          method: form.prop("method"),
          data: form.serialize(),
          timeout: 10000,
          dataType: "html",
        })
        .done(function(data) {
          $("#div_response").html(data);
        })
      });
</script>

</body>
</html>
```

```HTML
templates/answer.html

  
  <div id="modal1" class="modal">
    <div class="modal-content">
    <form method="POST" name="del_comp" action="{% url 'index' %}">
        {% csrf_token %}
        <input type="hidden" name="del_key" value="{{res}}">
        
        <p>以下のデータを本当に削除しますか？</p>
        <table>  
        {% for item in del_log %}
        <tr>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.group}}</td>
        </tr>
        {% endfor %}      
        </table>
        <button type="submit">本当に削除する</button>
    </form>
    </div>
    <div class="modal-footer">
      <a href="" class="modal-close waves-effect waves-green btn">閉じる</a>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
$(document).ready(function(){
    $('.modal').modal();
});
</script>
```

```Django
view.py

from django.shortcuts import render
from .models import test_log

def index(request):
    log = test_log.objects.all()
    
    if request.POST == "POST":
        del_list = request.POST['del_key'].split(',')
        del_obj = test_log.objects.filter(id__in=del_list)
        del_obj.delete()
  
    params={
            "log":log,
        }
    return render(request, "index.html",params)
    
def answer(request):
    select_ids = request.POST.getlist("del_ids")
    del_log = test_log.objects.filter(id__in=select_ids)
    res = ",".join(select_ids)

    params={
            "del_log":del_log,
            "res":res,
        }
    return render(request, "answer.html",params)


```
```Django
models.py

from django.db import models

class test_log(models.Model):
    name = models.CharField(max_length=100)
    group= models.CharField(max_length=100)
```

```Django
urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path("answer", views.answer),
]
```

### 試したこと

内部からクリックイベントかモーダルイベントを起こせないかと思い、Ajaxのところ（doneの最後）で以下を試しましたが、事象は変わりませんでした。

```jQuery
$("#btn_del").click();
$("#btn_del").trigger("click");

$("#modal1").modal("open");
```

### 補足情報（FW/ツールのバージョンなど）

Python 3.7.3
Django 2.2.1
jQuery CDNJS 3.4.1
Materialize　1.0.0

動作確認
Chrome 75
Windows10

MaterializeのModals内でAjaxを使用したい

### 前提・実現したいこと

Railsでcloneしたプロジェクトを
ローカルで動かしたい。

materializeが適用されなくて困ってます。


### 発生している問題・エラーメッセージ

**Sass::SyntaxError in Users#account_status**
Showing /home/hogeOS/hoge/app/views/users/account_status.html.slim where line #2 raised:

File to import not found or unreadable: materialize/components/color.
Load paths:
  /home/hogeOS/hoge/app/assets/config
  /home/hogeOS/hoge/app/assets/images
・
・
・
  /home/hogeOS/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/turbolinks-source-5.2.0/lib/assets/javascripts
  /home/hogeOS/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/materialize-sass-1.0.0/assets/stylesheets
  /home/hogeOS/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/materialize-sass-1.0.0/assets/javascripts


### 該当のソースコード
☆app\views\users\account_status.html.slim
```
.follower-up
  = image_tag "lim.png", {size: "104x88", style: "float: left"}
  div[style="font-size: 24px; margin-top: 32px"]
    = @account
- unless @login
  div[style="text-align: center"]
    div[style="font-size: 28px; margin-top: 32px; margin-bottom: 32px;"]
      | 管理ページログイン
・
・
・

```
☆app\assets\stylesheets\affiliaters.scss
```
// Place all the styles related to the Affiliaters controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

.select_box input.select-dropdown{
  font-size: 20px !important;
  margin-top: 10px;
}

body {
  background: image-url('background.png') no-repeat 0 0;
  background-size: auto 10000px;
}
・
・
・
```
![イメージ説明](8c65a6f60b498c4278252622d8b7ae06.png)


gemfileにはgem 'materialize-sass'
の記述がありbundle installも上手くいったのででインストールはされていると思います。

### 試したこと

CUIでファイルの有無、パーミッションを確認しましたが
問題ありませんでした。

### 補足情報（FW/ツールのバージョンなど）
バージョン
Rails 5.2.3
materialize-sass 1.0.0

【Rails】materializeが読み込まれない。　Sass::SyntaxError

### Materializeを使ったviewのcheckboxやformについて　Rails

Railsで投稿機能を持ったWebアプリケーションを作っています。
そこでUIのMaterializeを導入したのですが、導入前は問題なかったサブミットボタンや新しく入れたチェックボックスがどうしても機能せず困っています。
問題は2つあって新しく入れたチェックボックスの落とし込み方が分からないことと、チェックボックスのformタグがなぜかページ全体のformタグに反応してしまってサブミットボタンがformの外に出てしまって機能しなくなっていることです。


### 発生している問題・エラーメッセージ
これが導入前の問題なく動いていた投稿フォームです。
```html
<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :content %>
    <%= form.text_area :content %>
  </div>

  <%= form.file_field :image %>
  
  <div class="check_box">
    <span>タグ</span>
    <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %>
     <div>
       <%= tag.label do %>
         <%= tag.check_box %>
         <%= tag.text %>
       <% end %>
     </div>
    <% end %>
  </div>
 
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
```
```html
これがMaterialize導入後の投稿フォームです。

<%= form_with(model: @post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

    <div class="field">
      <%= form.label :title %>
      <%= form.text_field :title %>
      <p>タイトルは15字以内です</p>
    </div>
  
    <div class="field">
      <%= form.label :content %>
      <%= form.text_area :content %>
    </div>
  
    <%= form.file_field :image %>
    
    <form action="#">
      <%= form.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %>
        <p>
          <label>
            <input id="indeterminate-checkbox" type="checkbox" />
            <span>Indeterminate Style</span>
            <%= tag.text %>
          </label>
        </p>
      <% end %>
　  </form>
    
    <div class="actions">
      <%= form.submit class: 'btn' %>
    </div>
<% end %>
```
### 試したこと
ネットで色々調べてみましたが、わかりませんでした。
ブラウザの検証を使って調べたところサブミットが機能しないのは、なぜか投稿フォーム外に出てしまっているからだというのはわかりました。
### 補足情報（FW/ツールのバージョンなど）
Materialize 1.0.0
Ruby 2.6.3
Rails6!
画像は導入後のフォームを検証で見たものです。
[イメージ説明](e7a52caafcda797eb9fd79e62908ebdf.png)

追記：チェックボックスの方は単純にjavascriptの入れ忘れでした！サブミットの方は未だに動かないのでもしご存じの方はどうかよろしくお願いします！

Materializeを使ったviewのcheckboxやformについて　Rails

rails6で `gem materialize-sass, '~> 1.0.0`を使用しています。
色々な記事を読むと以下のように上書きができると書かれています。
```
# example.html.erb
<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>

# example.scss
.breadcrumb {
  @extend .breadcrumb;
  font-size: 12px;
}
```

`.breadcrumb` はmaterializeで定義されているクラスになります。
`font-size: 12px !important;` でも元の`.breadcrumb`のスタイルが当たっています。

app/assets/stylesheets/application.scss
```
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require material_icons
*/
@import "materialize";
```
application.scssと同階層に`example.scss` が存在します。
webpackでコンパイルしています。
`example.scss` の他のスタイル(独自で作ったクラスなど)は反映されています。
ただ、以下のように`example-class ` にスタイルを当てて上書きしようとしても、
`breadcrumb` クラスが優先されている状態です。
```
<nav>
    <div class="nav-wrapper">
      <div class="col s12">
        <a href="#!" class="example-class breadcrumb">First</a>
        <a href="#!" class="breadcrumb">Second</a>
        <a href="#!" class="breadcrumb">Third</a>
      </div>
    </div>
  </nav>
```

どなたかわかる方いたら教えてください。

materializeのcssの上書き方法

MaterializeのParallaxで画像が1つしか読み込まれません。
Developer Toolsではエラーが出ておらず、1つ目の画像は問題なく読み込まれているという点から、2つ目がなぜ表示されないのかわかりません。

以下のコードで間違っている点や修正すべき点を教えていただきたいです。

```html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <title>案件追加画面</title>
  </head>
  <body>
      
    <div class="parallax-container">
      <div class="parallax"><img src="img/test.jpg"></div>
    </div>
    <div class="section white">
      <div class="row container">
        <h2 class="header1">Parallax</h2>
        <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
      </div>
    </div>
    <div class="parallax-container">
      <div class="parallax"><img src="img/test.1.jpg"></div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
    const para = document.querySelector('.parallax');
    M.Parallax.init(para,{});
</script>
  </body>
</html>
```

##追記
別HTMLですが、

Materializeのdatepickerを同一ファイル内に2つ読み込もうとすると、

こちらも最初のdatepickerしか作動しませんでした。

同一ファイル内に同じJavascriptを読み込もうとすると、最初の1つしか作動しないのはこちらのParallaxと同じ事象かと思います。

このような問題を解決するためにはどのような対策が必要でしょうか。

以下は、datepickerが最初の1つしか作動しないコードです。
```html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="../css/styles.css" type="text/css" />
    <title>案件追加画面</title>
  </head>
  <body>
    
    <div class="row">
      <div class="col s0 l2">
        <ul id="slide-out" class="sidenav sidenav-fixed ">
          <li><a href="../index.html">クライアント一覧<i class="material-icons left">person</i></a></li>
          <li><a href="#">案件カレンダー<i class="material-icons left">date_range</i></a></li>
          <li><a href="addClient.html">クライアント追加<i class="material-icons left">add</i></a></li>
          <li><a href="addItem.html">案件追加<i class="material-icons left">add</i></a></li>
        </ul>
      </div>
    
      <div class="col s12 offset-l1 l8">
      <nav class="header">
          <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating"><i class="medium z-depth-1 material-icons">add</i></a>
      <h2 class="center-align">案件追加</h2>
      </nav>
      <form action="" method="POST">
          <div class="input-field col s12">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">〇〇に関するライティング依頼（一括登録あり）</label>
          </div>
          <div class="input-field col s12">
            <input id="last_name" type="text" class="datepicker">
            <label for="last_name">納期</label>
          </div>
          <div class="input-field col s12">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">単価（文字単価対応）</label>
          </div>
          <div class="input-field col s12">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">備考</label>
          </div>
          <input type="submit" value="案件編集" class="waves-effect waves-light btn blue accent-1">
          <input type="submit" value="案件削除" class="waves-effect waves-light btn red lighten-1">
      </form>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          var elems = document.querySelectorAll('.sidenav');
          var instances = M.Sidenav.init(elems, {});
        });
      </script>
      
      <script>
        const Calendar = document.querySelector('.datepicker');
        M.Datepicker.init(Calendar,{});
      </script>
  </body>
</html>
```