I’m looking for the width of a shape to be defined by the number of characters (or the width) of the text inside it. I have seen there are a few random plugins or parts of code to do this with various success, but I haven’t seen a simple conclusive solution.
Does anyone have a specific solution they recommend?
Above you can see the tags I am trying to have adjust in width based on the text length.
Thanks,
Chris
Why don’t you just add a background to the text instead of using shape. Or replace the shape by a group and place the text in it. Give the group a color
Maybe I wasn’t totally clear. What I am trying to do is have the width of the button increase based on the dynamic text inside.
Like this:
What is actually happening is my buttons have to be all defined as a single length and are coming like this:
There is extra space after the text, or if I make the box too small the text will overflow. Neither solution is acceptable. So I need to have the button adjust width based on text length and I do not know how to do it without drawing a bunch of buttons that conditionally render lengths, which causes other issues.
Does that make sense?
Any ideas?
It totally makes sense. Unfortunately there is nowhere you can specify a dynamic width in Bubble, so I don’t see any efficient way to achieve what you’d like.
Okay, I’ve figured out how to make variable width text with a background. I still need your help though!
Here is the code to make the variable width text with background:
You put this in an HTML element and the HTML element will turn its font, sizing, padding, and background based off of that code. Since mine is in a repeating group I pull the color of the background and the text itself from a database.
<style>
.beta{
position:relative;
font: 12px Roboto-Regular400;
padding:5px 8px;
color:#FFFFFF;
border-radius:3px;
float: left !important;
transform: translateX(100px);
}
}
</style>
<div class="beta" style="background: #000000"
Text goes here.
</div>
The result looks like this:
As you can see, the shape expands based on the text length, so first mission is accomplished.
The missing part I am stuck on is since I have two containers – one named “alpha” the other “beta” – with variable widths, I need to make the second one offset by a variable number of pixels.
I have a transform: translateX statement set up to put it 100px to the right. This works:
transform: translateX(100px);
I need the statement now to pull the width of the first container and offset the second by a variable amount. I tried this statement:
transform: translateX(document.getElementById("alpha").offsetWidth);
It does not work. I suspect the issue is potentially just missing the “px” somewhere, or worse it isn’t going to run the javascript in an HTML container.
Thoughts?
Thanks,
Chris
Hi everyone, I have solved this. I used a single HTML element for both of the tags in the Repeating Group. This made the tags in relation to eachother which made a simple 8px offset work to keep relative spacing. This also had the added benefit of simplifying the code.
Here is the code:
<style>
.alpha {
position:relative;
font: 12px Roboto-Regular400;
padding:5px 8px;
color:#666666;
border-radius:3px;
float: left !important;
}
.beta {
position:relative;
font: 12px Roboto-Regular400;
padding:5px 8px;
color:#FFFFFF;
border-radius:3px;
float: left !important;
transform: translatex(8px);
}
</style>
<div class="alpha" style="background:Current cell's Sponsor's Property_Types:first item's Color">
Current cell's Sponsor's Property_Types:first item's Display:uppercase
</div>
<div class="beta" style="background:Current cell's Sponsor's Markets:first item's Color"> Current cell's Sponsor's Markets:first item's Display:uppercase</div>
And here is the result:
As you can see:
Hope this is useful to someone else!
Best,
Chris
Chris, would you be open to helping me run through this on my application? I have to do something similar and I’m a bit new to HTML so any help would be greatly appreciated.
I recently encountered a similar problem and found a nice little hack. Rather than try and implement custom css/html here, just use bubble’s native Multi-select plugin. Make sure you disable the plug-in, so that users can’t change the values, but it accomplishes exactly what you are looking for. If you need to make the “categories” or “tags” separate colors, simply add conditions to back the background color of that entry.
Thanks Matt - the multi-select plugin is a really clean, easy option!
Thank’s for your post. Is it possible to make your tag clickable ? and show a popup by exemple ?
I want to do the same things like you but I want that my element is clickable.
Thank’s a lot for you answer. Have a good day.
Would this be possible for just the text width?
I have been looking at a bunch of discussions in search for a way to dynamically adjust the width of a text element in a repeating group based on the length of the text. I would have thought this would be a simple thing to solve, as almost every chat feature out there seems to do this. Cant figure it out though.
