【css】UIをキーボードの進出から守る方法

久々に触れたCSSの話題です。

cordovaで開発していたアプリでmaterial-uiを使用しているのですが、

iphoneの実機で、TextFieldがキーボードの中に飲まれるような形

になってしまい編集中のテキストが見えなくなってしまったので

修正をしました。

最初は、TextFieldそのものの位置を変更したり、positionを

relativeにしたりと試みたのですが、全部皆目見当違いでかなり

追い詰められてしまいましたw

そこでダメ元で設定したCSSをもう一度見返すと、このTextFieldにはtopとbottomが

決められていないことに気づきました。これはもしやbottomを設定して

最低位置を決められればいけるかもと思いbottomプロパティを設定。

恐る恐るデバッグをすると、無事TextFieldがキーボードに飲み込まれることなく

入力することができました。

ここで、iphoneのキーボードは高さの設定していないコンポーネントは

全部飲み込んでしまうことが分かりました、分かってしまいました。

androidのキーボードさんはそんなことしないのに…。

ちなみに同じ機能を持っているinputとかtextareaでも、bottomに設定していないとキーボード

に飲み込まれてしまうので要チェック。