Sticky Aside

[lesliekirk]

I have a fantastic sticky aside working in Shadows but now I'm trying to do the same exact thing in Colossus and it does not work. Why?

[SidFeyDesigns]

Try adding the class o-layout--align-top (align-items: flex-start;) to the parent element.

[SidFeyDesigns]

It looks like that css (align-items: flex-start;) is already assigned to the class o-layout--column-reverse in Shadows, so that is why it works in Shadows and not Colossus.

[lesliekirk]

It looks like that css (align-items: flex-start;) is already assigned to the class o-layout--column-reverse so that is why it works in Shadows and not Colossus.

I'm not seeing the css (align-items: flex-start;) assigned to the class o-layout--column-reverse - I do see flex-direction: row-reverse and I'm wondering if that's my issue. Argghhh!!! If I could just use the Colossus facet filters from Colossus in Shadows.....

[SidFeyDesigns]

Exatcly, that is why it's not working.

If you're afraid of breaking things or causing layout issues by editing the o-layout--column-reverse class in Colossus, just add the class that is already built into Colossus (o-layout--align-top) to the direct parent element of the aside and you should be fine. (As I had suggested in my first post.)

Just make a note to self that the class will be needed on parent elements when using position sticky.

[SidFeyDesigns]

The way "display: flex" works is the main reason this isn't working as is with Colossus.

The default value of "align-items" is "stretch" if it is not declared otherwise in the css.

This means the two child elements on the same row will have the same height even if the content doesn't fill the height of one of them. This actually negates position sticky since both child elements have the same hieght.

There is some great info on align-items here: https://developer.mozilla.org/en-US/...the_cross_axis

[lesliekirk]

OMG - that was the missing piece of the puzzle. THANK YOU!!!