Help us understand the problem. What is going on with this article?

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

materializeとは?

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

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

https://materializecss.com/

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を使おう!そして日本語情報を増やしていきましょう!

mutax
はじめまして。 Djangoでタスク管理のWEBアプリ「gantt」を作っています。 アプリを作る上で身につけたこととか共有して行こうと思います。
https://gantt.work
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした