技術

[ Ionic ]キーボード出現時にフッターを押し上げてしまう問題の対応

投稿日:

こんにちは。たなかです。

IonicFrameworkでモバイルアプリを開発させてもらっています。

開発したアプリを内部レビューしている時に、以下の問題にぶつかったので解消方法とともにメモしておこうと思います。

 

問題

フォームをタップしてキーボードを表示した際、
キーボードがフッターを持ち上げてしまう!

具体的には以下のような感じ。

画面の一番下にあるフッターと赤色のバナー部分がキーボードに押し上げられてしまっています。

機能的にエラーがあるわけではありませんが、ボタンの誤入力を誘発してしまいますし、なにより見た目がスマートじゃないので対応することになりました。

 

解決方法

app.component.tsにconfigを追記

以下の内容をapp.component.tsのconstructorに追記します。

constructor(){

this.config.set("ios", "scrollPadding", false);
this.config.set("ios", "scrollAssist", false);
this.config.set("ios", "autoFocusAssist", true);

this.config.set("android", "scrollPadding", false);
this.config.set("android", "scrollAssist", false);
this.config.set("android", "autoFocusAssist", true);

}

 

通常であればscrollAssistあたりが、キーボードとインプットの干渉を上手いことやってくれるらしいのですが、今回は逆にそれが邪魔しており、フッターがキーボードに隠れない様に持ち上がっていたようでした。

②adjustResize => adjustPan に変更する

①で対応だけでは、Android端末が解消しきれない場合がありました。

調査したところ、そのような場合には2通りの解消法があるとのことでした。

  1.  config.xmlから「<preference name=”Fullscreen” value=”true” />」を追加してフルスクリーンモードを適用させる
  2. platform/android配下に記述されたwindowSoftInputModeを全てadjustResize=>adjustPanに変更する

1は試してみたところ、キーボードは解消されたものの、ヘッダーが上にずれ込んでしまう不具合にぶつかり断念。
今回は2で進める方針に切り替えました。

platform/androidフォルダで「adjustResize」を文字検索し、全て「adjustPan」に書き換えます。

adjustResizeは言葉通り、キーボードが出現した時に画面のコンテンツサイズを自動計算して調整してくれる機能があるようで、adjustPanはそれを無効にする設定のようでした。

上記も合わせて対応することで、キーボードがフッターを持ち上げなくなりました!

 

まとめ

Ionicがよしなにやってくれたことが、かえって邪魔になってしまうパターンのやつでしたね。

最近は作りのせいなのかわかりませんが、Android端末でうまくいかないことが多い印象です。

 

修正は結構大変でしたが、やっぱり画面もスッキリしてかっこよくなったので対応してよかったです。

今回はここまで。

 

参考サイト

https://forum.ionicframework.com/t/keyboard-is-pushing-tabs-and-apps-contents-ionic-in-android/107375

https://forum.ionicframework.com/t/keyboard-hides-input-until-i-start-typing/60827

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

no image

【nginx/unicorn】(13: Permission denied) while connecting to upstream

どうも中田です。 AWS上でAPIサーバを構築してて、 * Webサーバ:ngi …

no image

【ionic】Android build Error: Uh oh!(ええとああ!)

どうも中田です。 環境をいろいろとupdateしたら $ionic build …

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

セレクトボックスの中にfont-awesomeのアイコンを表示したい。 そんなと …

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …