# 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:** 2

<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:** [December 2, 2019, 4:41pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/21 "2019-12-02T16:41:26Z")

</div>

Yes, I am using this in my chat feature. Works very well.

---

<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:** [December 2, 2019, 8:29pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/22 "2019-12-02T20:29:49Z")

</div>

How can you implement it? I also need it

---

<div class="post-metadata">

**Author:** ![kristian](https://avatars.discourse-cdn.com/v4/letter/k/e8c25b/32.png) [@kristian](https://forum.bubble.io/u/kristian)\
**Post date:** [December 21, 2019, 11:46am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/23 "2019-12-21T11:46:24Z")

</div>

I would find dynamic width really useful! Thanks for this brilliant platform!

---

<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:** [December 21, 2019, 5:44pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/24 "2019-12-21T17:44:25Z")

</div>

this would be so welcomed for our design flows for text and other components 👏 this would effectively change our process from “here’s Bubble’s constraints and design around them” to “we’ll build the design to spec”

---

<div class="post-metadata">

**Author:** ![zachenson](https://avatars.discourse-cdn.com/v4/letter/z/2bfe46/32.png) [@zachenson](https://forum.bubble.io/u/zachenson)\
**Post date:** [April 24, 2020, 8:39pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/25 "2020-04-24T20:39:39Z")

</div>

The air dev solution works really well. They just put an html element on the page with the below code, that then calls 2 html elements in your repeating chat groups. You would use 2 html elements for the dynamic chat instead of using [Bubble.io](http://Bubble.io)’s text elements.

body { font-family: "Open Sans" !important; font-size: 15px !important; font-weight: normal; } section { max-width: 450px; margin: 50px auto; div { max-width: 320px; word-wrap: break-word; margin-bottom: 20px; line-height: 24px; } } .clear {clear: both} .from-me { position:relative; padding:10px 20px; color:#FFFFFF; background:#2871FF; border-radius:15px; float: right !important; &:before { content:""; position:absolute; z-index:-1; bottom:-2px; right:-7px; height:24px; border-right:20px solid #0B93F6; border-bottom-left-radius: 16px 14px; -webkit-transform:translate(0, -2px); } &:after { content:""; position:absolute; z-index:1; bottom:-2px; right:-56px; width:26px; height:28px; background:white; border-bottom-left-radius: 10px; -webkit-transform:translate(-30px, -2px); } } .from-them { position:relative; padding:10px; background:#F5F5F5; border-radius:15px; color: #333333; float: left; &:before { content:""; position:absolute; z-index:2; bottom:-2px; left:-7px; height:24px; border-left:20px solid #E5E5EA; border-bottom-right-radius: 16px 14px; -webkit-transform:translate(0, -2px); } &:after { content:""; position:absolute; z-index:3; bottom:-2px; left:4px; width:26px; height:24px; background:white; border-bottom-right-radius: 10px; -webkit-transform:translate(-30px, -2px); } } ::-webkit-scrollbar { width: 0px; height: 0px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: transparent; } ::-webkit-scrollbar-thumb:active { background: transparent; } ::-webkit-scrollbar-track { background: transparent; border: 0px none; border-radius: 0px; } ::-webkit-scrollbar-track:hover { background: transparent; } ::-webkit-scrollbar-track:active { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; }

---

<div class="post-metadata">

**Author:** ![fourmi4x](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fourmi4x/32/81300_2.png) [@fourmi4x](https://forum.bubble.io/u/fourmi4x)\
**Post date:** [January 6, 2021, 6:28am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/26 "2021-01-06T06:28:18Z")

</div>

+1 for this feature, having a dynamic width of textbox / buttons would really help also in other cases than messaging, like for simple lists of clickable items.

---

<div class="post-metadata">

**Author:** ![wesfrank](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesfrank/32/79725_2.png) [@wesfrank](https://forum.bubble.io/u/wesfrank)\
**Post date:** [February 16, 2021, 1:47am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/27 "2021-02-16T01:47:35Z")

</div>

Yeah, this continuously comes up in my app development process and it’s a major design flaw imo.

There are many use cases (like the messenger app shown in this thread) but the one that bugs me the most is that you can’t really execute an element click event on a dynamic text box without it looking super funky.

For example - I have a dynamic text element that shows the Current User’s name, that when clicked, goes to their profile page. I have to make this text box super wide to encompass all of the possible character lengths that my user’s names could have.

When they hover over this text element to click it, it hovers over the ENTIRE text element and not just the dynamic text. So it looks weird that they can click their name from halfway across the page.

Please keep us updated!

---

<div class="post-metadata">

**Author:** ![killianAB](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@killianAB](https://forum.bubble.io/u/killianAB)\
**Post date:** [March 19, 2021, 11:27pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/28 "2021-03-19T23:27:10Z")

</div>

Hello,  
I’m re-launching the subject. Apart from the Airdev method (which is rather limited), is there any other solution?  
Is it planned in a future release?  
Best Killian

---

<div class="post-metadata">

**Author:** ![duke.severn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/duke.severn/32/38191_2.png) [@duke.severn](https://forum.bubble.io/u/duke.severn)\
**Post date:** [March 21, 2021, 4:01pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/29 "2021-03-21T16:01:17Z")

</div>

Hi @emmanuel - I understand the new responsive engine is taking time, the old one making dynamic width is difficult. Can we get something in between in the meantime? I’d suggest a checkbox on the text element that would enable the background-color and border properties wrap to the text, while the textbox r-line, r-box remains as it is? It would help with creating nicer chat elements.

---

<div class="post-metadata">

**Author:** ![akhlaqlps008](https://avatars.discourse-cdn.com/v4/letter/a/65b543/32.png) [@akhlaqlps008](https://forum.bubble.io/u/akhlaqlps008)\
**Post date:** [May 28, 2021, 5:54am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/30 "2021-05-28T05:54:11Z")

</div>

Same problem with me too. Have been looking for dynamic textbox very eagerly. Can anyone create a plugin for this?

---

<div class="post-metadata">

**Author:** ![doublejay](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/doublejay/32/132501_2.png) [@doublejay](https://forum.bubble.io/u/doublejay)\
**Post date:** [May 28, 2021, 5:58am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/31 "2021-05-28T05:58:23Z")

</div>

Would this solution help?

[![](https://img.youtube.com/vi/Rvp2WweKv4o/maxresdefault.jpg "HTML chips & tags | Bubble.io Tutorial") ](https://www.youtube.com/watch?v=Rvp2WweKv4o)

---

<div class="post-metadata">

**Author:** ![m.bb](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@m.bb](https://forum.bubble.io/u/m.bb)\
**Post date:** [May 29, 2021, 4:46pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/32 "2021-05-29T16:46:22Z")

</div>

This is brilliant, thanks for sharing @doublejay !

---

<div class="post-metadata">

**Author:** ![zvikag](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/zvikag/32/69648_2.png) [@zvikag](https://forum.bubble.io/u/zvikag)\
**Post date:** [June 11, 2021, 8:15am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/33 "2021-06-11T08:15:34Z")

</div>

Thanks for sharing @doublejay !  
This certainly solves the visual representation issue., but In my case I need the tags to be clickable (each tag is loading different page)  
Do you have any idea how to do that?

---

<div class="post-metadata">

**Author:** ![JBG](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jbg/32/106097_2.png) [@JBG](https://forum.bubble.io/u/JBG)\
**Post date:** [September 7, 2021, 11:30pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/34 "2021-09-07T23:30:26Z")

</div>

Hi there, do you have any news regarding this subject ? 🙂

---

<div class="post-metadata">

**Author:** ![mateusproto](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mateusproto/32/81621_2.png) [@mateusproto](https://forum.bubble.io/u/mateusproto)\
**Post date:** [September 7, 2021, 11:53pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/35 "2021-09-07T23:53:31Z")

</div>

@JBG

Welcome to Bubble Forum!

This plugin can handle this:

> **[Auto Adjust Width for RG Cells Plugin for Bubble, by Zeroqode](https://bubble.io/plugin/auto-adjust-width-for-rg-cells-1612791320422x829005571969777700)**
>
> Auto Adjust Width for RG Cells Plugin page on Bubble, by Zeroqode. Add Auto Adjust Width for RG Cells in one click to your app. Bubble lets you build web apps without any code.

---

<div class="post-metadata">

**Author:** ![openocean.tampa](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/openocean.tampa/32/119226_2.png) [@openocean.tampa](https://forum.bubble.io/u/openocean.tampa)\
**Post date:** [September 10, 2021, 7:38pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/36 "2021-09-10T19:38:45Z")

</div>

Has anyone discovered a viable solution to this yet? I find it hard to believe that 5 years has gone by and bubble still hasn’t made any effort to fix.

---

<div class="post-metadata">

**Author:** ![philippe1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/philippe1/32/38163_2.png) [@philippe1](https://forum.bubble.io/u/philippe1)\
**Post date:** [September 24, 2021, 7:26am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/37 "2021-09-24T07:26:37Z")

</div>

Many topics in this forum have 5 years or more of lamenting requests

---

<div class="post-metadata">

**Author:** ![JBG](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jbg/32/106097_2.png) [@JBG](https://forum.bubble.io/u/JBG)\
**Post date:** [September 26, 2021, 2:10pm UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/38 "2021-09-26T14:10:24Z")

</div>

Thanks @mateusproto 🙂

---

<div class="post-metadata">

**Author:** ![xtechaus](https://avatars.discourse-cdn.com/v4/letter/x/c0e974/32.png) [@xtechaus](https://forum.bubble.io/u/xtechaus)\
**Post date:** [December 5, 2022, 12:19am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/39 "2022-12-05T00:19:54Z")

</div>

yea. I find it more weird this wasnt a feature from day one of bubble, surely it was obvious almost every app made was going to have to use this lol

---

<div class="post-metadata">

**Author:** ![ihsanzainal84](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/ihsanzainal84/32/245932_2.png) [@ihsanzainal84](https://forum.bubble.io/u/ihsanzainal84)\
**Post date:** [December 5, 2022, 1:35am UTC](https://forum.bubble.io/t/dynamic-width-of-textbox/1257/40 "2022-12-05T01:35:44Z")

</div>

I already have my chatbox working this way in the responsive engine. What issue are you facing 🤔 ?

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

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