[Widgets] Stretch-to-Fit Messenger

Hi Bubblers,

When you’re unsure how long some text in a text element is going to be, it can be difficult to figure out what width to set that element (e.g. if you want text bubbles in a messaging interface, the background color of the text bubble might not wrap neatly around that text and you might have extra space to the right or left of that text). We just posted a new Widget that uses some HTML to fit the background of a text depending on the length of the text itself. Check it out below!


For more info about the Widgets site, see this thread: Announcing launch of the Widgets site! Showcase your work and see how widgets are built

Happy Bubbling!
The AirDev Team


@anon94914631 I believe this is the new link to it: https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700 :slight_smile:

1 Like

This is awesome @alex4! How would I make the line height slightly larger? (Not quite double-spaced, but larger than it currently is)?


1 Like

The text seems to overflow when a long message (without spaces) is sent (see below).

I’ve figured out a workaround nevermind

hai all how can i include image in this chat? Since the RG is not supporting dynamic column height, image is visible only partially ( bcz column hieght is 50 px and the image preview size i put 100*100 px). how can i solve this?

Hi, can you please share how you were able to make the line height slightly larger?


You just need to add in the body
line-height : 200(or something else lol) px

and it should work

1 Like