Is it possible to collapse the width of a group that is hidden ?
I have two groups (left and right) that are in the same row (a group as well), and that are both left-aligned.
When hiding the left group, I would expect the right one to take its position since they are left-aligned, and clicking on “explain box margin” displays a small margin for the group at the right.
However, this si not what happens: it just leaves an empty space and the group at the right stays at the same position…
Here is an example with the responsive settings (same for both groups):
Hi @florent.bocquelet Do you have a hiding rule set up on the purple group? If so, it should collapse in width. However, if it becomes hidden with a conditional statement, I don’t believe it will collapse in width.
My use case is left box has vertical repeating group and when user selects one row I want to be able to shrink left box to make room for right box for row details
Hi guys,
You could make your red group as wide as your page under your purple group. Set the left margin as solid and equal to the purple group width.
With a condition when purple group is hidden : the left margin of the red group is set to 0.
The issue with this workaround is that it’s not responsive…
Just opening this thread again as I also have this issue. Anyone found an elegant way to do this?
My use case: on a social profile page we want to show icons for each social platform that a user has added. It currently looks really odd when someone has filled out the first and last few options, because there’s a massive gap in the middle.
If you have groups of the same type displaying (i.e. photos or texts) you’re best bet is a repeating group in horizontal layout.
If you have groups of different types side-by-side (i.e. you have different types of users logging on that for some you may show one group of type A and for other type B and for others both groups (like Patients see prescriptions, Nurses see Doctor’s schedule, Doctors see both side-by-side), then you have no option but to duplicate the entire group:
-Wrap your two groups in your example in a master grouping container.
-Set that container to “collapse height when hidden” and to not be visible on page load
-Duplicate the entire master group container and place it below the first master group with 0px vertical spacing
-Delete the possibly-hidden group entirely out of the second master and expand your still-showable group
-Set conditionals on both master groups to properly display respectively
-Repeat this for all permutations
Your page might get quite long in the editor, but on display the collapsing hidden groups will render just fine.
Set up a state called ‘Layout’ and put it as a number.
Create a field in the User data type called ‘Layout’ as text (or checkbox/number)
Create two layouts, using 2 groups. 1 group would have the half screen layout with the side bar like your image called 'Side Bar View. Then duplicate that group and move it all the way to the left and call the second group ‘Full Screen View’.
Add an icon like an arrow or a minimise icon on your side bar.
Have a workflow that says ‘When this icon is clicked, change Layout state to 1’ and 'Make a change to Current User’s Layout field to ‘full screen’
Add an icon like a right arrow or maximise icon at the top left or you could have it in a settings page etc
Have a workflow that says ‘When this maximise icon is clicked, change state to 0’ and 'Make a change to Current User’s Layout field to ‘side bar enabled’
Have a workflow that says ‘When page loads, show Side Screen View group’ and ‘When Page loads, show Full Screen View group’ and in the ‘Only When’ area put 'Only when Current User’s Layout is ‘side bar enabled’. for the Side Screen View group. For the Full Screen View group put 'Only when Current User’s Layout is ‘full screen’.
*Note: When your user is creating an account ensure that you do ‘Create a thing’ and Field name, address, date of birth yada yada but make sure you have the field = Layout to either ‘side bar enabled’ or ‘full screen’ otherwise they won’t see either.
I created my side bar as a separate floating group and toggled that on when the side bar enabled was on, so that my side bar could scroll no matter how long the actual page was, otherwise you’d scroll and your side bar would slowly disappear.
If I was to do this, I would take one group and put it on the left side in the width that I would want the menu to be. Then I would add a floating group on top of it to build the menu in. Create animations on the floating group to slide it out and slide it in depending upon some action.
Next, add a drag/drop group to the right of the menu group and increase it to the width you to fill the page. This becomes the content group. Add an inner group to this one and build all your content in this one.
For the workflow actions, animate the menu group close and then move the drag/drop group using coordinates. When closing the menu, move the group by the x-coordinate by half the width of the menu (if the menu is 300px wide, move the drag/drop group -150 in the x-coordinate).
In the workflow for the showing of the menu, animate the showing of the floating group and then move the drag/drop group back to 0 in the x-coordinate. And with that, you have the sliding content when you collapse the menu.
As a note on this, you will need to do some work on the responsive side. When viewing on a tablet/mobile device, use the responsive tab to collapse the group under the floating group. Then use the current page width to prevent the drag/drop group from being moved at all.
Do you have a hiding rule set up on the purple group? If so, it should collapse in width. However, if it becomes hidden with a conditional statement, I don’t believe it will collapse in width.