Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

materializeを使ったformのselectタグで、iOS13だと正しく選択できない

materializeとは?

Googleが作ったWeb用のフロントエンドフレームワークです。
レスポンシブデザインに対応していて、BootStrapみたいな感じで使えるので使いやすいです。
何よりいいのが、Bootstrapみたいに使えるのにBootstrapっぽくないので「あ、こいつフロントエンドはお手軽に済ましたな!」みたいに思われにくく、作り込んだ感が出ます

iconも豊富でカラーバリエーションも多いので、作り込まれたサイト感が出しやすいです。
またフラットなデザインなので、UnDrawのイメージともなじみやすくよきです。
最近流行りの感じのサイトをお手軽に作ることができます。

Bootstrapから抜け出して次に行きたい!という人、ぜひmaterializeCSSを使いましょう。
日本語の情報がまだ少ないっぽいので、もっとやれるひとを増やしていきたいのです。

問題の詳細

さて、そんなすばらしいmaterializeですが、ちょっと不具合があったのです。
formのselectはおしゃれで使いやすいんですが、iOS13では正しく選択できません。
(正確にはiOS13のChromeで正しく動きませんでした、Safariはみていません)

materializeのselectタグは、JavaScriptで動かしているみたいなんですが、それに不具合があったようです。
githubのisueに問題が報告されています。
https://github.com/Dogfalo/materialize/issues/6444

解決方法

「じゃあどうすりゃいいんだよ!」ってなるとおもいますが、こちらの不具合はすでに修正されています。
ただリリースはされていないので、githubからソースをダウンロードして、js/select.jsだけを追加で読み込んでください。

手順

  1. materializeCSSのソースを一式落とす。https://github.com/Dogfalo/materialize
  2. 自分のプロジェクトの所定の場所に、js/selec.jsを移す。
  3. 自分のプロジェクトで、materializeCSSを読み込んだあとに、select.jsを読み込む。
index.html
    <script type="text/javascript" src="{% static 'materialize/js/select.js'%}"></script>
    <script type="text/javascript" src="{% static 'user/js/user.js'%}"></script>

確認

iOS13で試してみる。ちゃんと選べる!かんぺき!

おわりに

たぶん次のリリースで修正されるとは思いますが、それまでは悩む人も多そうなので記事にしました。
繰り返しになりますがmaterializeCSSを使おう!そして日本語情報を増やしていきましょう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?