Conditionally format visibility of reusable element

After a reusable element has been created, and it is placed on a page and we have the limited editor options available

Screen Shot 2020-01-02 at 10.43.12 PM

it would be very helpful for responsive design to allow for a conditional to set the visibility of the reusable element.

My use case for the one in the screen shot is that it is a product menu for the left side of screen…I want to hide/show it based on current page width. Would be helpful to have that on the editor instead of needing to use conditionally formatted workflows.

2 Likes

Make the reusable element a group and place it in a floating group

2 Likes

Thanks Ali…I had already made the reusable element and have the formatting etc. all polished up on it. I was placing it on the page to use it and needed to hide/show it based on current page width.

What I did as a workaround was created a group on the page and placed the reusable element inside that group. Then on the group element I placed the conditional to make the group visible or not based on current page width.

It is a simple enough work around, although would be nice to get that conditional functionality on the reusable element instead.

3 Likes

Yes, I agree

Faced the same issue on several occasions but i don’t think this is an easy fix for the guys over at Bubble. Let’s hope this is on there list of things to do in the future.

1 Like

many thanks!
Had the same issue and this is a very simple hack that does the job :slight_smile:

1 Like

Hi @boston85719 and @AliFarahat , I have a similar use case and I tried creating a group and placing the reusable element (which is my sidebar menu) into the group but it won’t let me. I just cannot seem to place the element in the group. Tried dragging it in, clicking it in. nothing…
Can you walk me through how you did it? I’m still only a couple of weeks old in using bubble.io.

Ok i fixed it! hah. I realised i made the reusable element a floating group and such groups cannot be put into another group. Now that i changed it to normal group i was able to add it to a group.

Probably might also be better UI if it’s not a floating group.

1 Like