Forum Academy Marketplace Showcase Pricing Features

Responsiveness for elements hidden with conditionnal formatting

Hello,

I wish the text get full width when the button is hidden :

But I only succeeded in getting this :

Does anyone know how to do this ? is there a trick ?
Demo here : https://bubble.io/page?type=page&name=responsiveness&id=forumapp3&tab=tabs-1

Thks for your help

Yes, I’m 99% sure there’s a very simply way to do this.

Watch Bubble’s responsive video / tutorial and it’ll explain how to do this (among other things). At it’s core, you’ll want to set the page as responsive and then use the responsive settings to make this happen.

1 Like

Hey @nicolas.daprigny :slight_smile: for that one you would just need to add a hiding rule. So since the Button is inside a Group, you would click on that Group and select “Add Hiding Rule”:

Here, Bubble is automatically calculating the parent width (the larger Grey Group which holds all of these elements). That group’s width is currently 817 pixels in this example. So with that hiding rule, the small right group with the button will become hidden when the parent (Grey Group) width is 817 pixels or less.

Since the text element on the left is not set to fixed-width, and it has no max-width, its width will increase to the width of the Grey Group, once the small right group is hidden.

1 Like

Thanks @jeyewatson for your help.
Actually, hiding an element according to its parent’s group width is fine. What I want to achieve is : If the button’s group is hidden on load (not juste when < 817 px), the text expend its width.

The use case to be clearer : I use a repeating group to display a feed of actuality. Sometimes there is a button on the right, sometimes not. When there isn’t, I wish the text get full-width.

@Emmanuel, would it be doable to have a hiding rule such as “Hide when element not visible” - so linking the “hiding rule” with the “visible” conditionnal formatting of the element ? or even this rule applied by default ?

Another hacky way to do something like this would be to include the text twice - one smaller width, one full width. Then, put a condition on the smaller one to only display if the button is visble and on the full width one to only display if the button is not visible.

Just another idea.

yes, an idea, but doesn’t very clean :slight_smile:

Yeah. It’s definitely a hack.

Put the button into a group and set all states (hidden/shown) on the group instead of the button.
Then activate “Collapse when hidden” on that group

can you show me on the demo of the forum app I made please ?

Thks for helping but I don’t think you answear my issue.