Strange alignment issue with Sort

I have a Sort stack which currently has 6 items.
Each item consists of 1 Linked List with 1 item, and 1 Paragraph.
All Sort items are part of the same Equalize group.
The defaults of 1 column for mobile, 2 for tablet and 3 for desktop are in place.
When I load the page that has the Sort, the default view is Show All.

When the page is loaded (Desktop view), all items show as same size, so Equalize is definitely working. The first and third columns (items 1 and 4 in column 1 and items 3 and 6 in column 3) are not properly spaced. Column 2 is properly spaced.

If I click on any of the filter buttons, including Show All, all items and columns are properly spaced.

Also, and I don’t know if this is a problem, I created all of the items by copying from the first one I made. The first one’s Sort Number is 1, but all the others have sort numbers of 10, 11, 12, etc. If I try to manually assign numbers 2-9, the values are not accepted.

What’s going on here?

So both this post and your other post regarding placing a Flip stack within a Slider revolve around the same problem, and that is combining complex stacks together that cannot work when combined. And to be fair Stacks makes it easy to unwittingly combine some of these tools that are quite complex, which you wouldn’t likely do if you were coding this all by hand.

The first thing I want to touch on is the old adage of the “K.I.S.S.” method - Keep It Simple Stupid. Not calling you stupid by any means though.

unnamed

It essentially boils down to avoiding combining lots of effects based stacks. Many of these sorts of stacks need to be able to determine how much space they have available to them and they do so when the page is loading. If they’re hidden at page load then those calculations cannot take place.

Using your example of the Flip stack within a Slider as an example – The Flip stack is hidden in the Slider during page load. This means it believes it has a height available to it of 0px ad it sizes itself accordingly.

The Sort stack example is a little different, but along the same lines. The sort items are in a Masonry layout. This layout is meant to have unequal heights. It does a bunch of math at page load time to organize the items into a brick-like masonry pattern based on their individual heights. Equalize is not going to work here because (1)using Equalize is antithetical to Sort’s layout engine and (2) the two stacks are both trying to set the height of these items during page load.

Circling back around to the K.I.S.S. methodology – it is alway best to try not to combine complex effects together. Sometimes it can work, but a lot of the time you’ll end up with problems such as these. If you do, take a step back, remove some things from the page that are doing fancy effects and see if it clears up your problem(s).

In conclusion though, the two things you’re trying to do, in both of the threads you posted over night, are not going to work together.

3 Likes

Thank you for the quick and detailed response.