Automatically adjust the length of the text box depending on the content

[makara]

Hello.
What I want to achieve is this.

This is the part I’m struggling with.

I want to display the “icon”, “name”, and “show profile button” of the person I’m talking to, side by side, in the center.

However, there are some problems here.

1. The width of the text cannot be automatically adjusted according to the content.
2. If it can be adjusted automatically, the number of characters per line cannot be specified.
3. Even if it can be automatically adjusted, it is not possible to center the “icon”, “name”, and “button to display profile” together.

For those of you who will see this in the future
I’d like to leave the code for it here when it’s solved.

Please help me.

[mateusproto]

Hi @makara

Please, see if this is what you are looking for:

Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode

We have just published a new plugin - Dynamic Height and Width of Bubble Elements. This plugin would allow you to dynamically change any element’s height/width depending on the viewport or page size. In case you choose the “keep proportion” option please make sure the element that you apply it to has “fixed width” enabled, otherwise the responsive settings might conflict with the plugin width adjustment. For details, screenshots and demos please visit https://zeroqode.com/plugin/dynamic-heigh…

I hope this can help you!

[makara]

Thanks for the replies!
@mateusproto

I’ve been trying to…
This only seems to change the height and width of the element in %, and I couldn’t see if I could specify more than 100.

I also need to calculate the width of the text.
This solution may be a bit difficult.

[mateusproto]

@makara

I am sorry the plugin I would like to refer is that:

Auto Adjust Width for RG Cells Plugin for Bubble

When I used this plugin, it adjusted the width to the text size.

If it is what you need, after that, you could try to get the element by ID and at the end find its width.

[makara]

Thank you!
Thanks for your help, I solved the problem.

[mateusproto]

Glad to hear that!

[makara]

Oh,

I couldn’t solve the third problem with the center selection.

If you have any ideas, please let me know!

[mateusproto]

In my app I replaced icons per images and set a style centralizing everything, because I realized the plugin removes the styles to fit the width. Please, check it if can help you.

[makara]

thank you!

As a countermeasure against deletion
I wrote in the html section that it should be centered. Is that correct?

[mateusproto]

Excelent ! That works too and in the html you can have your own styles set. It gives you more flexibility.