Yes, I am using this in my chat feature. Works very well.
I would find dynamic width really useful! Thanks for this brilliant platform!
2 Likes
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”
3 Likes
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’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; }
1 Like
+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.
6 Likes
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!
6 Likes
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
1 Like
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.
3 Likes
Same problem with me too. Have been looking for dynamic textbox very eagerly. Can anyone create a plugin for this?
1 Like
Would this solution help?
10 Likes
This is brilliant, thanks for sharing @doublejay !
1 Like
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?
Hi there, do you have any news regarding this subject ? 
1 Like
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.
3 Likes
Many topics in this forum have 5 years or more of lamenting requests
1 Like
Thanks @mateusproto
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
I already have my chatbox working this way in the responsive engine. What issue are you facing 
?
1 Like