技術

[ 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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

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

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

Angularでセレクトボックスに色をつけたいとき

こんにちは。コーテッグのこやまです。 Angularでセレクトボックスが特定の値 …

no image

[リアクティブフォーム]バリデーションチェックを任意のタイミングで走らせる。

Angularのリアクティブフォームで使っていると、 バリデーションを後付けした …

no image

【ionic】Androidビルド失敗!Multiple dex files define

どうも、中田です。 久しぶりにionicでビルドしたらAndroidビルドに失敗 …

no image

【ionic】FBログイン時にSafari認証になってしまう

どうも中田です。 ionicでFacebookログインを実装した時に、 Nati …