Stackable icon indicating copy to clipboard operation
Stackable copied to clipboard

Position sticky doesn't work as intended

Open bfintal opened this issue 2 years ago • 1 comments

Steps:

  1. Create 2 columns
  2. 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)
  3. Set the attribute of ToC block: Adv tab > Position > Position: sticky
  4. 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 (see block-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 to 100%
    • Also try blocks that use a Column block (Feature block, Accordion block, Image box block, etc)

bfintal avatar Mar 16 '22 03:03 bfintal

Reopening this because the fix was causing issues to Accordions when they're placed inside Columns. Will need to revisit this one.

bfintal avatar Aug 27 '22 17:08 bfintal

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

bfintal avatar Nov 06 '23 06:11 bfintal