# bubble iosにおいてキーボードを開くとページが画面上部に食い込む

**URL:** <https://www.nocode-faq.com/t/topic/4408>\
**Category:** bubble\
**Created:** [2024 年 10 月 18 日午前 10:45 UTC](https://www.nocode-faq.com/t/topic/4408 "2024-10-18T10:45:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)\
**Post date:** [2024 年 10 月 18 日午前 10:45 UTC](https://www.nocode-faq.com/t/topic/4408/1 "2024-10-18T10:45:14Z")

</div>

### 1.前提条件

・bubbleアプリをBDK Nativeを用いてネイティブ化している

### 2.発生している問題

・iPhoneのノッチ付きの比較的新しい端末について、チャットなどでキーボードを開くと画面が上部に若干食い込み上方向にずれてしまう  
・食い込みは戻る時があるがどのような条件で戻るのか把握できていない  
・iPhone7などのノッチの無いiPhoneでは発生しないが、iPhone12、iPhone15などノッチのある新しいiPhoneで発生する

### 3.エラーメッセージ

### 4.実装したい機能

・キーボードを開いても食い込まないようにしたい

### 5.スクリーンショット

スクショを添付します。赤く塗った箇所がおおよそのノッチの部分です。

 ![S__136241155_022](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/96d16541c3cf4638bccfdc81652ac55717cbd48b.jpeg)  
↑これは正しい状態です。

 ![S__136241159_02](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/484f64eae08aff13b8afe0b72bd94c5abd59090f.jpeg)  
↑上部に食い込むと、ヘッダーの上部に隙間ができてしまいスクロールしたコンテンツが隙間から見えてしまう、という状況です。

ヘッダーの位置は固定なのですが、セーフエリア（ [iPhone Xのセーフエリアやマージン幅について #iOS - Qiita](https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8) ）自体が上方向に広がってしまっているように見えます。

これが発生する条件は、チャットなどでキーボードを使用したときで、以下のようなイメージです。

 ![S__136241157_02](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4a1cf3313e9380cbc023677a228d69488a6c18e8.jpeg)  
↑チャットでキーボードを開くとコンテンツが画面最上部まで入り込んで（これが正しいかエラーなのかは分かりませんが）、上記画像のような状態に一度なるとそれ以降画面が少し上に食い込む形です。

 ![S__136241158_02](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6953ae3d4a832163f56e112f05b685d53232b55f.jpeg)  
↑キーボードが開いていない時はこのような形です。青部分にはユーザー名が入っています。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 10 月 22 日午前 4:20 UTC](https://www.nocode-faq.com/t/topic/4408/2 "2024-10-22T04:20:25Z")

</div>

BDK のノウハウは、他の方もなかなか、無いので、大変ですよね。

私もあんまり不明瞭ですが、  
一般的にはノッチ対策は、基本は、ウィジェット側で、  
SafeArea使うのだと思います。  
（ノッチやステータスバーなどに重ならないエリア）

例えば、以下のようなウィジェットを組むことで、ノッチがあった場合には、その下にウィジェットが対応可能になります。

SafeArea(  
child: Scaffold(  
body: Center(  
child: Text(‘これは、セーフエリアです’),  
),  
),  
)

ただ、BDK側で、上記のウィジェットを作成できるのか、私もちょっと調べてきれてないです。BDKドキュメントには、SafeAreaに関する記述やコメントがないため、もしかしたら、BDK自体が、ノッチ非対応なのかもしれません。

一旦、参考程度で、申し訳ないです。

---

<div class="post-metadata">

**Author:** ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)\
**Post date:** [2024 年 10 月 28 日午前 10:48 UTC](https://www.nocode-faq.com/t/topic/4408/3 "2024-10-28T10:48:34Z")

</div>

ありがとうございます、、、色々調べてみます。。

---

<div class="post-metadata">

**Author:** ![takashi](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@takashi](https://www.nocode-faq.com/u/takashi)\
**Post date:** [2025 年 5 月 10 日午前 2:37 UTC](https://www.nocode-faq.com/t/topic/4408/4 "2025-05-10T02:37:23Z")

</div>

> [@tsubasa](#):
>
> ウィジェット

突然のご連絡を失礼いたします！  
こちらの問題について解決はされましたでしょうか？？

同様の案件でつまづいており…🙇‍♂️

---

<div class="post-metadata">

**Author:** ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)\
**Post date:** [2025 年 6 月 15 日午後 2:21 UTC](https://www.nocode-faq.com/t/topic/4408/5 "2025-06-15T14:21:32Z")

</div>

お返事遅くなりました、、！

結論から申し上げますと、ヘッダーの

トップマージンを-50px  
トップパディングを50px

にすることで解決できました！

極稀にマージンやパディングにマイナスを使うのですが、それによって子エレメントを親グループの枠から貫通させて飛び出させるができるんですよね。

トップマージンを-50にすることで今回問題になっている隙間を埋めて、上に食い込ませるわけですね。このままだと子エレメントも上方向に食い込むので、その埋め合わせとしてトップパディングを50作ってプラマイゼロにする、という形です。

---

<div class="post-metadata">

**Author:** ![macchi\_hal](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/macchi_hal/32/6234_2.png) [@macchi\_hal](https://www.nocode-faq.com/u/macchi_hal)\
**Post date:** [2025 年 6 月 15 日午後 2:26 UTC](https://www.nocode-faq.com/t/topic/4408/6 "2025-06-15T14:26:02Z")

</div>

ちなみに、takashiさんは以下の現象についてはどうですか？解決できず困っています。。。

恐らくそちらでも同じような問題が起こるのではないでしょうか？？

> [@bubble BDK Native を用いたネイティブアプリの諸問題](https://www.nocode-faq.com/t/topic/4558):
>
> 1.前提条件 ・bubbleで制作したアプリをBDK Nativeを用いてネイティブ化している ・私にはプログラミングの知識は一切ない 2.発生している問題 ①iPhone12～くらいより新しい世代のiPhoneにおいて、縦スクロールの無いページを表示した際に、わずかに（15pxほど）上下にスクロールできて動く ②textエレメントの「recognize links and emails」を…