久々に触れたCSSの話題です。
cordovaで開発していたアプリでmaterial-uiを使用しているのですが、
iphoneの実機で、TextFieldがキーボードの中に飲まれるような形
になってしまい編集中のテキストが見えなくなってしまったので
修正をしました。
最初は、TextFieldそのものの位置を変更したり、positionを
relativeにしたりと試みたのですが、全部皆目見当違いでかなり
追い詰められてしまいましたw
そこでダメ元で設定したCSSをもう一度見返すと、このTextFieldにはtopとbottomが
決められていないことに気づきました。これはもしやbottomを設定して
最低位置を決められればいけるかもと思いbottomプロパティを設定。
恐る恐るデバッグをすると、無事TextFieldがキーボードに飲み込まれることなく
入力することができました。
ここで、iphoneのキーボードは高さの設定していないコンポーネントは
全部飲み込んでしまうことが分かりました、分かってしまいました。
androidのキーボードさんはそんなことしないのに…。
ちなみに同じ機能を持っているinputとかtextareaでも、bottomに設定していないとキーボード
に飲み込まれてしまうので要チェック。
これで今回の問題は解消。cssに対する耐性が少しずつ強くなってきた気がする。
