Dear,
How do I change positions of the body group once I hide the left menu? Please see my app here, to hide the menu you can click on the left arrow in the navigation bar.
For the time being, horizontal position can only change based on the width of the parent of an element (often the page width), and is set in the responsive engine. In other words, you can collapse the height of a group based on conditions, but not the width.
There is a workaround, but a bit of a hack. You can set a border width in the body group that matches the width of the disappearing menu. When the side menu is invisible, a condition removes the border, which moves all the elements inside the body group to the left.
1 Like
Is Bubble gonna add this functionality? I don’t see how the workaround would move all the elements inside the group to the left. What I want to do is to just change positions of groups when certain conditions are met, can this be achieved with workflows?
I don’t know if it’s on the roadmap I’m afraid. It’s been discussed regurarly over the last few years, but so have many other feature requests. It’s not possible to do it with workflows either in Bubble’s current state.
There are plugins that can move elements around and change their dimensions though. Search for “move” in the plugin window and you’ll see a few. They may be able to solve it for you.
The workaround does work, and I’ve used it for several projects, although I won’t advertise it as best practive. Your body group will have an x position of 0 and a left border of, say, 200 px in an invisible color. So the body group itself doesn’t actually move, but the wide left border pushes elements inside it to the right when your menu is visible.
I understand the workaround and can see it work great, I’ll give it a try.
This hack works as expected but it causes some responsive issues on mobile 
Ah, I haven’t seen that myself, but I would expect it to not behave 100% in all browsers. Again, it’s not really the “right” way to do it, but without a plugin or manual scripting it’s the only way I’ve found so far.
It pushes the elements on mobile screens, it’s a lot of work to adjust this formobile responsiveness but could come in handy within groups. Thanks for the valuable tip!