# BubbleのFloatingGroupのhideについて

**URL:** <https://www.nocode-faq.com/t/topic/1457>\
**Category:** レスポンシブ\
**Tags:** フロントエンド\
**Created:** [2021 年 4 月 20 日午後 2:13 UTC](https://www.nocode-faq.com/t/topic/1457 "2021-04-20T14:13:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![shogo](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@shogo](https://www.nocode-faq.com/u/shogo)\
**Post date:** [2021 年 4 月 20 日午後 2:13 UTC](https://www.nocode-faq.com/t/topic/1457/1 "2021-04-20T14:13:16Z")

</div>

Bubbleのレスポンシブ表示について質問です。  
FloatingGroupを「hoge px以下でhideする」と言う設定はできないのでしょうか？

具体的には、  
PC、タブレット表示の際には左側に固定のサイドバーを表出させているのですが、  
スマホ表示の際にはこのサイドバーを削除してハンバーガーメニューorLINEのようにフッダーアイコン一覧を表示させたいと思っています。この設定をしようとした際に躓いてしまいました…。

---

<div class="post-metadata">

**Author:** ![lingmu](https://avatars.discourse-cdn.com/v4/letter/l/e5b9ba/32.png) [@lingmu](https://www.nocode-faq.com/u/lingmu)\
**Post date:** [2021 年 4 月 20 日午後 2:34 UTC](https://www.nocode-faq.com/t/topic/1457/2 "2021-04-20T14:34:59Z")

</div>

この動画が分かりやすいです[Responsive解説動画](https://www.youtube.com/watch?v=vbr1YpdCmJw)  
ポイントはShapeなどをFloatingGroupの背後に置くことです。

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2021 年 4 月 21 日午前 5:40 UTC](https://www.nocode-faq.com/t/topic/1457/3 "2021-04-21T05:40:18Z")

</div>

ページ側でGroupに入れ、GroupのConditionalで「Current page width \<= 768」のような条件を指定して隠すのはどうでしょう？

---

<div class="post-metadata">

**Author:** ![shogo](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@shogo](https://www.nocode-faq.com/u/shogo)\
**Post date:** [2021 年 4 月 21 日午前 5:57 UTC](https://www.nocode-faq.com/t/topic/1457/4 "2021-04-21T05:57:15Z")

</div>

@jansnap さん  
ありがとうございます！  
確かに！と思って試しているのですが、FroatingGroupをGroupの枠内に入れてもグループ化されないのですが、これは何か設定が必要でしょうか…？

---

<div class="post-metadata">

**Author:** ![jansnap](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/jansnap/32/6599_2.png) [@jansnap](https://www.nocode-faq.com/u/jansnap)\
**Post date:** [2021 年 4 月 21 日午前 6:17 UTC](https://www.nocode-faq.com/t/topic/1457/5 "2021-04-21T06:17:26Z")

</div>

Elements treeで見てもグループ化されていないという事でしょうかね。  
対象のFloating Groupを右クリックして「Group elements in a Group」を選ぶと、サイズを気にせずグループ化できると思います。

---

<div class="post-metadata">

**Author:** ![shogo](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@shogo](https://www.nocode-faq.com/u/shogo)\
**Post date:** [2021 年 4 月 21 日午前 7:15 UTC](https://www.nocode-faq.com/t/topic/1457/6 "2021-04-21T07:15:17Z")

</div>

@jansnap さん  
あ、ページ全体のグループには入ってました！（ていうか僕が意味を履き違えてましたｗ）  
そして @lingmu さんに紹介いただいた動画とのあわせ技でできました！！

めちゃくちゃ感謝です！！！これができるようになるとできることがかなり増える…！  
ありがとうございました