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
I grouped the elements together (from documentation: “Grouping elements is very useful when you want them to move together on the page. Select a few elements and right click on them to group them.”)
I unticked “Make this element fixed-width”
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?
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
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…
