# 【bubble】ヘッダーに付けたFlortingGroupがうまく動きません・・・

**URL:** <https://www.nocode-faq.com/t/topic/3736>\
**Category:** bubble\
**Tags:** フロントエンド\
**Created:** [2023 年 6 月 23 日午前 6:22 UTC](https://www.nocode-faq.com/t/topic/3736 "2023-06-23T06:22:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shosawada](https://avatars.discourse-cdn.com/v4/letter/s/8e7dd6/32.png) [@Shosawada](https://www.nocode-faq.com/u/Shosawada)\
**Post date:** [2023 年 6 月 23 日午前 6:22 UTC](https://www.nocode-faq.com/t/topic/3736/1 "2023-06-23T06:22:47Z")

</div>

ヘッダーにアイコンを設置し、クリックするとFlortingGroupが開くようにしているのですが、ページ上でエレメントの後に行ってしまったり、画面遷移のWorkFlowが機能しなかったりします。  
プレビューモードでは何度かちゃんと機能したのですが、動いたり動かなかったりしてしまいます。  
何か考えられる原因はあるでしょうか？

【実装】  
 ![スクリーンショット 2023-06-23 15.21.30](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/74885d51a24530e7e6cea574964931643c71fca5.png)

【表示】

 ![スクリーンショット 2023-06-23 8.36.12](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f770666db02faaf144def9e6d61a3dc32d354cfd.png)

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2023 年 6 月 23 日午前 6:56 UTC](https://www.nocode-faq.com/t/topic/3736/2 "2023-06-23T06:56:33Z")

</div>

アイコンをクリックしたときにそのアイコンの近く（例えば下）に表示させる事がしたいと思うので、  
その場合に使用するのはFloating GroupよりもGroup Focusがおすすめです。

対象のアイコンのエレメント名をReference elementに指定すれば（デフォルトで）指定したエレメントの下に表示されますよ。

---

<div class="post-metadata">

**Author:** ![Shosawada](https://avatars.discourse-cdn.com/v4/letter/s/8e7dd6/32.png) [@Shosawada](https://www.nocode-faq.com/u/Shosawada)\
**Post date:** [2023 年 6 月 23 日午前 6:58 UTC](https://www.nocode-faq.com/t/topic/3736/3 "2023-06-23T06:58:09Z")

</div>

ありがとうございます！  
やってみます！！

---

<div class="post-metadata">

**Author:** ![Shosawada](https://avatars.discourse-cdn.com/v4/letter/s/8e7dd6/32.png) [@Shosawada](https://www.nocode-faq.com/u/Shosawada)\
**Post date:** [2023 年 6 月 23 日午前 7:08 UTC](https://www.nocode-faq.com/t/topic/3736/4 "2023-06-23T07:08:22Z")

</div>

今、アイコンの左端に揃ってるんですが、右端に揃えるにはどうすれば良いでしょうか・・・。  
 ![スクリーンショット 2023-06-23 16.06.57](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/203b27bbf263e69a070b5a3b7f569aa85b27039b.png)

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2023 年 6 月 23 日午前 7:27 UTC](https://www.nocode-faq.com/t/topic/3736/5 "2023-06-23T07:27:00Z")

</div>

offset leftの値を  
アイコンの幅 - 作成したgroup focusの幅  
としてみてください！

例）  
アイコンの幅 30px  
group focusの幅 70px  
→ 30 - 70 = **-40px**  
のイメージです。

---

<div class="post-metadata">

**Author:** ![Shosawada](https://avatars.discourse-cdn.com/v4/letter/s/8e7dd6/32.png) [@Shosawada](https://www.nocode-faq.com/u/Shosawada)\
**Post date:** [2023 年 6 月 23 日午前 7:31 UTC](https://www.nocode-faq.com/t/topic/3736/6 "2023-06-23T07:31:25Z")

</div>

わかりました！  
ご丁寧にありがとうございます！