# Dynamic width of textbox

**URL:** <https://forum.bubble.io/t/dynamic-width-of-textbox/1257>\
**Category:** Uncategorized\
**Created:** [January 25, 2016, 4:21am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257 "2016-01-25T04:21:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![donaldlh](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@donaldlh](https://forum.bubble.io/u/donaldlh)\
**Post date:** [January 25, 2016, 4:21am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/1 "2016-01-25T04:21:48Z")

</div>

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

 ![](https://us1.discourse-cdn.com/bubble/original/1X/5022202f9d9a19e3ab5ec64438b7035e6d2d1b14.png)

---

<div class="post-metadata">

**Author:** ![NigelG](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@NigelG](https://forum.bubble.io/u/NigelG)\
**Post date:** [January 25, 2016, 6:40am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/2 "2016-01-25T06:40:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [January 25, 2016, 8:20am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/3 "2016-01-25T08:20:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [January 25, 2016, 3:15pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/4 "2016-01-25T15:15:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [January 25, 2016, 10:50pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/5 "2016-01-25T22:50:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [January 25, 2016, 11:31pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/6 "2016-01-25T23:31:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NigelG](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@NigelG](https://forum.bubble.io/u/NigelG)\
**Post date:** [January 26, 2016, 6:36am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/7 "2016-01-26T06:36:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cm1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cm1/32/3947_2.png) [@cm1](https://forum.bubble.io/u/cm1)\
**Post date:** [August 29, 2016, 7:09pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/8 "2016-08-29T19:09:10Z")

</div>

@emmanuel no plans regarding this feature?

regards

---

<div class="post-metadata">

**Author:** ![cm1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cm1/32/3947_2.png) [@cm1](https://forum.bubble.io/u/cm1)\
**Post date:** [August 29, 2016, 7:28pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/9 "2016-08-29T19:28:17Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [August 29, 2016, 7:52pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/10 "2016-08-29T19:52:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cm1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cm1/32/3947_2.png) [@cm1](https://forum.bubble.io/u/cm1)\
**Post date:** [August 29, 2016, 7:57pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/11 "2016-08-29T19:57:31Z")

</div>

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](http://bidy.dk/version-test/index)  
in the footer , the space between terms, disclaimer etc.

 ![](https://us1.discourse-cdn.com/bubble/original/2X/c/c973e06b15211b42915a6181fb221eacf72c4dac.png) ![](https://us1.discourse-cdn.com/bubble/original/2X/8/8b42889992ce76f1040140ae24302c5eac9eccda.png)

---

<div class="post-metadata">

**Author:** ![joe5](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/joe5/32/21213_2.png) [@joe5](https://forum.bubble.io/u/joe5)\
**Post date:** [November 4, 2019, 8:54pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/12 "2019-11-04T20:54:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cdorozco16](https://avatars.discourse-cdn.com/v4/letter/c/bbce88/32.png) [@cdorozco16](https://forum.bubble.io/u/cdorozco16)\
**Post date:** [November 4, 2019, 11:48pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/13 "2019-11-04T23:48:53Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/f/3f9ee3e739cf6f2dd8fb1ab182921982b8d7f680.png)

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

---

<div class="post-metadata">

**Author:** ![emmanuel](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/emmanuel/32/27657_2.png) [@emmanuel](https://forum.bubble.io/u/emmanuel)\
**Post date:** [November 5, 2019, 1:20am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/14 "2019-11-05T01:20:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NigelG](https://avatars.discourse-cdn.com/v4/letter/n/ea5d25/32.png) [@NigelG](https://forum.bubble.io/u/NigelG)\
**Post date:** [November 5, 2019, 7:46am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/15 "2019-11-05T07:46:59Z")

</div>

> [@joe5](#):
>
> you found a way around this?

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

---

<div class="post-metadata">

**Author:** ![fifosi](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@fifosi](https://forum.bubble.io/u/fifosi)\
**Post date:** [November 5, 2019, 11:31am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/16 "2019-11-05T11:31:25Z")

</div>

Hey @donaldlh

Check this

> **[Stretch-to-Fit Messenger | AirDev Widgets](https://widgets.airdev.co/bubble-widget/stretch-to-fit-messenger-1496772972510x651241166982799700)**
>
> Use Bubble's HTML element to create a messaging interface with “width-fitted” text bubbles sized to the width of your message.

---

<div class="post-metadata">

**Author:** ![shu.teopengco](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@shu.teopengco](https://forum.bubble.io/u/shu.teopengco)\
**Post date:** [November 11, 2019, 7:55am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/17 "2019-11-11T07:55:40Z")

</div>

Have you tried it? Also need this one.

---

<div class="post-metadata">

**Author:** ![anders.eidergard](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@anders.eidergard](https://forum.bubble.io/u/anders.eidergard)\
**Post date:** [November 11, 2019, 9:37am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/18 "2019-11-11T09:37:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ashley.benson.tait](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ashley.benson.tait/32/13292_2.png) [@ashley.benson.tait](https://forum.bubble.io/u/ashley.benson.tait)\
**Post date:** [November 16, 2019, 12:41pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/19 "2019-11-16T12:41:36Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![SerPounce](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/serpounce/32/62068_2.png) [@SerPounce](https://forum.bubble.io/u/SerPounce)\
**Post date:** [November 16, 2019, 1:48pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/20 "2019-11-16T13:48:53Z")

</div>

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.

[Next page](https://forum.bubble.io/t/dynamic-width-of-textbox/1257.md?page=2)
