# bubbleでチャットを美しくデザインする方法

**URL:** <https://www.nocode-faq.com/t/topic/4333>\
**Category:** bubble\
**Created:** [2024 年 7 月 18 日午後 4:27 UTC](https://www.nocode-faq.com/t/topic/4333 "2024-07-18T16:27:24Z")\
**Posts on this page:** 2\
**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 年 7 月 18 日午後 4:27 UTC](https://www.nocode-faq.com/t/topic/4333/1 "2024-07-18T16:27:24Z")

</div>

bubbleでチャット機能を作る時に、

①吹き出しの幅を合わせたうえで時刻を隣にきれいに表示する方法

②LINEやTwitterと同じく、チャットの最新のデータを一番下にしたうえで、ページロード時に最新の一番下を表示する方法

上記2点を教えてください、、、情けないことに2つとも解決できず、不甲斐ないですがヒントあれば教えていただきたいです。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2024 年 7 月 21 日午前 10:01 UTC](https://www.nocode-faq.com/t/topic/4333/2 "2024-07-21T10:01:58Z")

</div>

①fit with to contentを使うと、text要素と同じ幅になります。

②こちらのプラグインが使えると思いますよ。

> **[Templates for Bubble](https://bubble.io/plugin/repeatinggroup-to-chat--reverse-rg-1577723723112x940641204980154400)**
>
> Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.