Forum Academy Marketplace Showcase Pricing Features

Dynamic width of textbox

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

How can you implement it? I also need it

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 :clap: 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.

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

2 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.

2 Likes

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

Would this solution help?

3 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?