Button responsive according to text size

[prasaanth1993]

I am retrieving data from a repeating group and I need my button width size to be responsive according to my text size .need some ideas!
the above image is how i got

this is how i want

Pls Help!!!

[andrewgassen]

I don’t believe this is currently possible, unfortunately.

Edit:
I don’t believe this is currently possible without writing code

[eftomi]

It can be done, the hard way by using javascript and ID attribute of the element that should be dynamic(button in this case). I haven’t tried this technique with elements within repeating groups, but it should work, I suppose, with proper logic:

• firstly, enable Settings | General | Expose the option to add an ID attribute to HTML elements
• set the ID field of your button element:

• you can set the width of the button with a couple of javascript sentences. The safest approach is to use a plugin (like Toolbox), using the javascript action in a workflow. The event should be ‘on page loaded’ or something else, anyhow the page should be already rendered. The sentences for the button are:

document.getElementById("myButton").style.width = "50 px";
document.getElementById("myButton").parentElement.style.width = "50 px";

So, with document.getElementById("myButton") you get the reference to the button, and with style.width you can set its width. However, the button is enclosed in a (div) element with the same width, so to have uncorrupted page it’s best to set the width for that element as well - that’s why there is a second statement with parentElement reference.

The width can be calculated from some parameter, like the number of characters to be shown. When setting the javascript code, you can for instance have:

I prepared an example app: editor and preview. Firstly you type some words in Input A, then press the button.

The structure of the elements in the resulting page can be seen when you preview the app: press F12 to get the ‘developer view’ in your browser; there you can see the structure of your document or DOM (document object model). Various browsers show this differently, but quite similarly. ‘DOM explorer’ usually works like Bubble’s debugger ‘hover to reveal’:

[NigelG]

In the past I have done it by having different width elements, and showing/hiding them depending on the number of characters.

[prasaanth1993]

I have used the given example inside a repeating group, but only the initial button changes whereas the other buttons does not changes its width, In that Initial button also the change of width occurs on clicking the button only, It is not adjusted automatically on page load where i use the dynamic data inside the button.

This is how it seems on pageload

This is how it shows on clicking initial button of repeating group - where dynamic data represents ''Actor"

The problem to be fixed is on page load i need all the buttons to be responsive according to the dynamic data in repeating group. Please give me some ideas or example preview with editor which will help me in this case.

TIA

[eftomi]

If you used the ‘javascript approach’, the challenge is that with RG you have multiple elements with the same ID. That’s what Bubble creates in that case, and as far as I know the html documents should not have elements with the same ID.

That being said, you can get an array of elements with ID = “myText” with this syntax:

var myarr = document.querySelectorAll("#myText");

Hash # is obligatory and is not a part of the ID. Then you can process each element in this way:

myarr[0].style.width = "10px";
myarr[1].style.width = "20px";
...

Of course, you would probably use a for … of loop to process all items.

I added a RG to the example above, please have a look.

Anyhow, these are ‘strange waters’ and I would be glad if Bubble had some other way to better handle RGs. For instance, cells dynamic height/width, putting an index to “myID” fields, etc.

Why don’t you try Nigel’s approach?