Table of Contents (TOC) Test Page
Known current limitation: if TOC long enough, then flex layouts (like img macro) will have their content misaligned. (Fully inline works fine.) See next image:
Spent a couple hours trying to work around and couldn’t figure out. The most promising approach:
-
keep the
.table-of-contentscontainerposition: stickyto allow the nice scrolling and container-limiting behavior- TBD: have it know about its height based on its content (to stop scrolling), but not push the flex elements around. is this possible?
-
style the element inside if it (
<details>) withposition: absoluteso it’s out of document flow and doesn’t push the flex elements- TBD: all the alignment/padding of the
.table-of-contentsnow had to be re-done. do we need aposition: relativeintermediary?
- TBD: all the alignment/padding of the
In the meanwhile, just use inline images (![]()) near the top of articles with long TOCs.
level 2
some text here
level 3
gosh this is structured
level 4
you have to be kidding
level 5
this is joke, this has to be a joke
level 6
just stop
level 2
ahhh
level 3 again
not again
