Please add the ability to hide floating groups in the Responsive View. I have a floating group that is overlaying other groups when I reduce the page width. Not sure if that is a bug, but to overcome the issue I want to be able to hide the floating group below a certain size in the responsive view, and that option is not available.
Here’s a screenshot showing the floating group appearing over top of another regular group. I would prefer the other group to float down below the floating group.
Can you email us a test page (as a bug report)?
Hi, I’m having the same issue…
The below condition on the floating group (In UI Builder mode) doesn’t seem to be kicking in…
In the responsive view mode, there are limited constraint options for the floating group.
In comparison to a normal group:
We’ll look into it.
Having similar issues to those above with regards to floating groups and responsiveness @emmanuel.
Was there any resolution to the issues you were having @andrewmackers @Kfawcett
Hi Matthew,
In UI builder mode, if you select the floating group, Conditional properties, you can set a condition for visibility at a page size change.
This has the same effect as adding a hiding rule in responsive mode.This wasn’t working when I posted above initially, and it was promptly fixed by the Bubble team.
Cheers,
Andrew
Thanks for the response, Andrew. You’ve solved my problem!
Hello @emmanuel I am trying to hide the floating group using the conditional statement but unfortunately this doesn’t really function like the native feature in the responsive designer as it does not adjust the elements to its right to re-align to use the white space.
Is there a possibility of adding the “Hide when patent width” option?
It works in run mode right?
It does but the other group width are not adjusted. The behavior that is its hidden, but does not allow other elements to resize its width. See below
Normal
Hidden using conditional format. See the white space
Floating groups aren’t part of the page as other elements are, that’s why. This is by design (and not easily changeable).
Any suggestions of how to overcome this or a workaround
Did you figure out a workaround to this problem?
I solved it using a border to the group that I want to push to the left. By default it shows from X=0 but when the left menu is visible it gets a 60px border:
Not sure if this is very practical though…
Identify why the element is positioned as it is, and run some custom JS to fix it using css.
Look into using JS/jquery for adding styles.
I also recommend you tag your div`s you want to manipulate using javascript, adding a unique ID to them. Put a html block inside and use JS to add a class or ID to the 4th parent.
Then you can play with css in a more easy manner.
This may have been solved elsewhere but figured I’d add my input since I’ve been struggling with this too and this particular thread was the most relevant to my issue.
Instead of a floating group, I created a regular rectangular “menu” group to the left of a group with my other content.
Then, in the responsive menu, I used the “add hiding rule” option for this “menu”. When I resized the browser window, it promptly disappeared and the group to the right, with the main content of the page, expanded to fill in the gap.
I then created a reusable element from the “menu” group and added it to a floating group, triggered by a menu button. This allowed me to show the same menu on top of the content.
could you pls share screenshots of how you did this
You beautiful bastard, you just went and solved it! I assumed this problem was unsolvable for years. The way you explained it wasn’t clear, so I’ll clear it up:
I’ve got a menu floating group on the left, and content group to the right. Adding a hiding rule to the left menu makes it disappear, but doesn’t fill the space left behind. What @TechieInAK is saying is you add a regular Group behind your floating group, with the same width and height, no background, nice and invisible to the eye, and then add a hiding rule to this group in the Responsive builder, with the same width as the hiding condition on your floating group. When you shrink the width, the condition hides the floating group, and the hiding rule collapses the width of the regular group, pulling the content group to the left.
Does that make sense? Can provide screenshots if necessary.
Thanks for clarifying. it works great. Kudos !
Hi,
I am having the same issue. I am able to hide the floating group but unable to fill the gap.
I tried the solution which @TechieInAK mentioned but somehow it didn’t worked.
Can anyone share the screenshots or give some idea on this please ?
