浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】キーボードがUIを飲み込んでしまう時の対処法

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

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

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

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

修正をしました。

 

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

これで今回の問題は解消。cssに対する耐性が少しずつ強くなってきた気がする。

  • この記事いいね! (0)