質問編集履歴
1
タグの追加、コードの修正、環境情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,19 +5,33 @@
|
|
|
5
5
|
PCで操作した際は問題なく動作・反応してくれるのですが、スマートフォンで操作しようとするとうまく動作せず困っております。。
|
|
6
6
|
例えば、「ユーザー３」を選択したくて上記画像の灰色の部分を指でタップしても、「ユーザー３」が選択されずに値が「ご自身のニックネームを選択ください」のままで残ったり、たまに反応しても下の「ユーザー４」や「ユーザー５」が選択されてしまうといった状態です。
|
|
7
7
|
|
|
8
|
-
該当のコードは以下の通りです
|
|
8
|
+
該当のコードは以下の通りです（ブラウザに表示されたもの）
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
```HTML
|
|
11
11
|
<div class="input-field input-field--size">
|
|
12
|
-
<form method
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
<form method="post" action="********">
|
|
13
|
+
<input type="hidden" name="csrfmiddlewaretoken" value="*****">
|
|
14
|
+
<!-- -->
|
|
15
|
+
<div class="select-wrapper">
|
|
16
|
+
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-*****">
|
|
17
|
+
<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);">
|
|
18
|
+
<li class="disabled" id="select-options-*****" tabindex="0"><span>ご自身のニックネームを選択ください</span></li>
|
|
19
|
+
<li id="select-options-*****" tabindex="0" class=""><span>メンバー１</span></li>
|
|
20
|
+
<li id="select-options-*****" tabindex="0"><span>メンバー２</span></li>
|
|
21
|
+
<li id="select-options-*****" tabindex="0" class="selected"><span>メンバー３</span></li>
|
|
22
|
+
<li id="select-options-*****" tabindex="0"><span>メンバー４</span></li>
|
|
23
|
+
<li id="select-options-*****" tabindex="0" class=""><span>メンバー５</span></li>
|
|
24
|
+
</ul>
|
|
25
|
+
<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>
|
|
26
|
+
<select name="evaluator_id" tabindex="-1">
|
|
27
|
+
<option value="" disabled="" selected="">ご自身のニックネームを選択ください</option>
|
|
28
|
+
<option value="54">メンバー１</option>
|
|
29
|
+
<option value="55">メンバー２</option>
|
|
30
|
+
<option value="56">メンバー３</option>
|
|
31
|
+
<option value="57">メンバー４</option>
|
|
32
|
+
<option value="58">メンバー５</option>
|
|
33
|
+
</select>
|
|
34
|
+
</div>
|
|
21
35
|
<button type="submit" class="btn blue accent-3 btn-blue btn-size waves-effect waves-light">OK</button>
|
|
22
36
|
</form>
|
|
23
37
|
</div>
|
|
@@ -26,4 +40,7 @@
|
|
|
26
40
|
Materializeで実装された[他のプルダウン](https://shimabox.net/sample/materialize-material_select/index.html)（別の方のブログで公開されていたものです）を同じスマホで触って見たところ、こちらは問題なく反応していたので、私の記述したコードの方に問題があるはずなのですが、原因がわからず質問させていただきました。
|
|
27
41
|
|
|
28
42
|
materializeだとこの辺りをチェックした方が良い等のアドバイスや、何かヒントをご存知の方がいらっしゃいましたら、ぜひご教示いただけますと幸いです。
|
|
29
|
-
何卒よろしくお願い致します。
|
|
43
|
+
何卒よろしくお願い致します。
|
|
44
|
+
|
|
45
|
+
**■環境について**
|
|
46
|
+
・Materializeのバージョン： 1.0.0
|