Forum Documentation Showcase Pricing Learn more

Dynamic width of textbox

I’m building a chat app and was wondering is there anyway to make the width of a textbox shrink/grow based on content the way bubble does with height. I’d like for the textbox of short responses to not be so wide. See screenshot

2 Likes

So, I think this would be possible.

When you store the message, you also store the “number of characters”.

You then have two text boxes, one short and one long, which you conditionally display based on the number of characters.

1 Like

I had the exact same issue and had to give up… Bubble seems to allow stretch to fit but that’s really only for vertical text wrapping. A Stretch to fit feature for horizontal text wrapping would be great.

1 Like

Right, we don’t have this. You could use the ‘number of characters’ option to get the length of a message, and then how/hide elements based on this (@NigelG, no need to save it in the DB), but it’s a little cumbersome.

1 Like

But how to dynamically set width as no. of characters * say 10 ?? Cos the field width has to be a static data right ?

We don’t support variable width, but you could have more than one element, with different sizes, and show / hide them based on the text’s length, by using conditions. Not a great way, but a workaround.

2 Likes

I thought saving a “size” (S/M/L) when you create the thing would allow you update/add sizes in the future, rather than having to add logic each time based on field length. Makes for a simpler condition.

@emmanuel no plans regarding this feature?

regards

This would be really helpful right now, when we have the option to use different languages in the apps, where the text width is depending on the selected language :slight_smile:

Not really, as it would be quite tricky with the responsive engine.

any idea how we could find a way around it?
i have tried with some conditionals, using padding, text alignment but still not good enough
http://bidy.dk/version-test/index
in the footer , the space between terms, disclaimer etc.

@emmanuel will this dynamic width text box be available in the next few months maybe? @NigelG you found a way around this?

1 Like

the only workaround I’ve found is to not use colored bubbles with the text. Instead, have the UI look something like this

Make the entire cell for the sender white
Make the entire cell for the sendee some other color like gray

we’re going to work on our responsive engine in the new year, so that may bringing dynamic width to element, but i’m not sure yet. Responsiveness is definitely something we’ll want to improve in the new year though.

7 Likes

Other than the cumbersome show/hide … nothing has sprung to mind I am afraid.

Hey @donaldlh

Check this

1 Like

Have you tried it? Also need this one.

I picked up the stuff from Airdev and it works just fine.

It’s actually been a bit more of a problem for me to make the chat itself work as desired re performance and scrolling to the bottom.

Hey Joe,

In the past, I have calculated the width of text and resized the text box with a plugin. It’s a pain to implement, but it works… Surely Emmanuel will bring us this feature down the road… But it’s probably a wayyyyys away!

peace!

Bubble on Joe!

Sincerely,

Ashley

ps. Hi Nigel!

The only way that I am aware of is to use 2 text boxes that you show or hide based on the number of chars.