Forum Academy Marketplace Showcase Pricing Features

Expandable element to displace nearby elements

Dear Bubble community members,

I want to add a text that can expand when its content increases, and that the element(s) next to it are displaced to give room to that text.
For example, I have a text element with the text “Like” in it. Once a user likes the post, the text element text changes from “Like” to “Unlike”, which contains more characters.

Current behavior: When the text becomes long it covers the elements next to it, without displacing the elements, see picture
image

image

What I want to achieve:
image

image

What I tried:

Any tips or pointers are super appreciated!
Cheers,
Olivier

Hi there, @olivier.is.on.bubble… for what it’s worth, I will throw the obvious (and probably quite the cop out) suggestion out there of just having the text element be wide enough to accommodate “Unlike”. Since it is only two more characters than “Like”, I don’t know if I would worry about it all that much. Also, one could make an argument from a UI perspective that you don’t necessarily want the “Comment” icon to move (for a number of reasons, alignment with the same icon above or below it being one of them, if that’s a thing in your app) when a user clicks the “Like” icon.

The above being said, there is a setting in the new responsive engine that might be what you need. I am only a beginner when it comes to the new engine and I haven’t played around with this particular setting yet, but there is a Fit width to content checkbox that seems like it might do the trick here. Have you tried that setting?

Best…
Mike

1 Like

Hi Mike,
Thanks for your reply.

  1. I totally agree with your (cop out) suggestion, I’m just trying to learn how bubble works.
  2. I upgraded the page to the new responsive engine. I read: Shared Controls - Bubble Docs, where the documention states:

Note: This setting is only available on container elements inside a parent container with a layout type of align to parent or row.

I made a container element (more specifically, a group) inside a parent container with a layout type of align to parent, but I cannot find the Fit Width to content checkbox, I am looking in the appearance and also the layout tabs.
Where can I find it?
Cheers,
Olivier

It’s on the Layout tab, and in order to get it to show up, you have to uncheck the Make this element fixed-width box.

1 Like

Hi Mike,
Thanks! I changed it and now the element indeed expands based on content. I would like the comment icon next to it to be displaced due to its expansion. What I am looking for is to align comment icon to the “like” text element such that it sticks to the text element. When the text element expands, the comment icon moves. Any ideas?
Cheers,
Olivier

What I am looking for is to align comment icon to the “like” text element such that it sticks to the text element. When the text element expands, the comment icon moves. Any ideas?

You’ll need to make sure the parent container is a Row for that to work…

2 Likes

As always, perfect!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.