I have a 1 page app with several groups.
Most of them are normal groups but 2 or 3 are floating “groups”" simply containing a floating nav bar or save button.
I always have either empty white space below content, or when I make the main page smaller (as suggested in yet another thread), content gets cut off in certain groups.
I had all groups as big as their content and then all of them “collapse when hidden” - doesn’t work.
I now have all groups (apart from the floating ones) same size (as big as the biggest) and within each an empty “group” that simply collapses when hidden and also isn’t visible on page load - doesn’t work.
what you need to do is stack the groups beneath each other with 0px space between them. What you have done with having groups on top of each other is terrible practice and you will probably never solve the random space issue.
It will take you couple of minutes to do it and should fix all the problems (or at least make the problems solvable)
Yep, if you have all your groups in the same place, or overlapping (as you have now) your page will always appear as tall as the tallest group in it.
To achieve what you’re trying to do you’ll need to ‘stack’ your groups as @bartek.dev says, so the each group is in it’s own position on the page, with no overlapping.
So, one group will start where the previous group ends.
So for example, if you have 2 groups, A and B, group B would be placed (group B’s Y position), where group A ends (group A’s Y position + group A’s height).
That way groups that aren’t visible will collapse, and the page will only be as tall as the currently visible groups.
I’m having trouble with this randomly also. Other groups work fine. We’ve checked for overlaps, even rebuilt the page. We can’t figure out why it’s not collapsing when it should just like the rest of the groups on the page. I think something’s up. Bug report submitted.
Thank you, Adam!
When I do that, it doesn’t actually collapse it though. I get empty space at the top instead
They’re all stacked now and none are overlapping. Apart from floating groups, of course. Or die they also have to be underneath everything?
I stacked them now instead of overlapping… I made them all collapse when not visible but now I just have empty space at the top
I’m not working with “hide/show group X”, I’m working with states. Does that make a difference?
Also none of the groups are visible on page load. They’re only visible once the states are set depending on what buttons people click.
So now the space underneath is gone but it’s above it now
Yes, your floating groups are overlapping your top group, which is causing the white space at the top when the top group is hidden. Including the header nav.
You’ll need to stack them as well, or maybe group them all into a single group and stack that.
Also, your group ‘Profile’ is slightly overlapping the group above it which is causing some slight alignment issues with that.
I just tested it (copied your page into a test app) and correctly stacked the header nav floating group, and deleted all the other floating groups, and it all worked fine - so it’s definitely an issue with the floating groups not being stacked.
Play around with that and you should get it all displaying how you want it to.
Thank you, Adam!
But how do floating groups work then?
Because now that I’ve stacked them at the end of all the groups, they are creating space underneath and also not showing, when before they were. The “Exit Intent”
Because now the floating element is simply at the very top. It does float when scrolling but of course shouldn’t be creating that space above it.
I also tried putting the floating group over the only group that requires that specific floating element, but then it simply doesn’t show, depiste “bring it to front” and all that.
*edit: The floating groups don’t seem collapsable, and therefore creating that empty space. But when moving them above the required group, they don’t show at all. When putting them at the very end of the stack they also don’t show
Without looking at the editor I venture to guess the fix is that in the locations you have the floating group you should put a regular group in the same location so that you can complete your stacking.
Then your floating group floats above the group, so the group is not seen and only the floating group is, then give the same conditionals to collapse the height of that group when the floating group is not visible, so the group collapses its height and removes the white space.
Resolvi postar, pois estava com problema parecido e consegui solucionar.
No meu caso, estava funcionando tudo muito bem, porém após colocar algumas funcionalidades, ao realizar o “collapse” ficava com um espaço exato do grupo de cima, ou seja, um grande espaço em branco antes do grupo que queria mostrar.
Descobri que tinha uma pequena caixa de alerta “esquecida” e fixada no topo, que “bugou” tudo, deletei ela e tudo foi resolvido!
I decided to post, because I had a similar problem and I managed to solve it.
In my case, everything was working fine, but after adding some features, when performing the “collapse” I had an exact space in the top group, that is, a large blank space before the group I wanted to show.
I found that I had a small “forgotten” alert box attached to the top, which “bug” everything, I deleted it and everything was resolved!
I’ve found that forgotten hidden elements are nearly always the culprit for misbehaving collapsing behavior. Double and triple check
