Stackable
Stackable copied to clipboard
Position sticky doesn't work as intended
Steps:
- Create 2 columns
- Add a ToC block on left (or any block actually), add headings and a lot of text on right (it should be more than the height of the viewport)
- Set the attribute of ToC block: Adv tab > Position > Position:
sticky
- Preview in frontend, the ToC block should stick to the top when scrolling past it
Notes / findings:
- There should be a
top: 0
style automatically added if the position is set to sticky and there's no other position added (seeblock-components/advanced/style.js
) - The column
.stk-inner-blocks
isn't spanning the whole height of the column.
Things to test:
- The steps above should work
- Try different combinations of columns (Columns block & Column block alignments, heights) they should work as expected - we need to test this because column
.stk-inner-blocks
has been adjusted to100%
- Also try blocks that use a Column block (Feature block, Accordion block, Image box block, etc)
Reopening this because the fix was causing issues to Accordions when they're placed inside Columns. Will need to revisit this one.
Let's not anymore do this since now you can just set these settings on an Inner Column block to achieve sticky columns:
- Adv tab > Position > Position: Sticky
- Layout tab > Layout > Column Alignment: Start