Component insists on starting at full height above the text

[aegonwolf]

Thank you for this great tool and plugin! I've played around with it quite a long time as I am trying to use it for an interactive version of my bachelor thesis ToC.

I have a small issue that I haven't been able to fix in the past few hours and would love your input. When I enter the component like so:

<Toc
  desktop = {true},
  headingSelector = {":is(h1, h2):not(.toc-exclude)"}
  --toc-desktop-max-width = "300px";
  />

It first starts by using up its full height above the actual content.

This is actually also the case for the example code provided:

<Toc
  --toc-desktop-aside-margin="10em 0 0 0"
  --toc-desktop-sticky-top="3em"
  --toc-desktop-width="15em"
/>

Though I am guessing I am too newbie to get it right.

I can make it work by setting it in an absolute positioned div, but then it becomes unsticky. Any advice on how to correctly do this would be greatly appreciated, thank you so much either way for this component!

[janosh]

@aegonwolf Thanks for the feedback, glad you like it!

It's up to the developer to position the ToC where/how you want. If you want position: sticky without taking up space on the page (like position: absolute) you can give the parent element position: absolute and set an explicit height. You could also set display: flex; on the parent container to have the ToC and content side-by-side 'naturally'.

[janosh]

Here's a minimal REPL showing the display: flex; way.

[aegonwolf]

Dear @janosh thank you so much! edit: I was able to figure it out, setting the parent div to sticky has worked! :-) thanks again!!

[janosh]

Cool, I'll close this as resovled then.