[Widgets] Stretch-to-Fit Messenger

Showcase
1

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!

https://widgets.airdev.co/widget/1496772972510x651241166982799700

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

11 Likes
3

@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
4

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

Thanks

1 Like
5

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

image
image750×1334 39.5 KB

6

I’ve figured out a workaround nevermind

7

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?

8

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

9

@mwika.eugene

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

and it should work

1 Like