"ol.toc-list" could be truncated, especially if the root heading is shown

[stenzengel]

Hi Tim,

I had the problem that the "ol.toc-list" was truncated when there were many headings, especially when the root heading was displayed.

I could workaround the problem by overriding the max-height and transition properties in https://github.com/tscanlin/tocbot/blob/5eb0b85e7bf5f29d92389f4be18985a5eca087d3/src/scss/_tocbot-core.scss#L30

with

.is-collapsible {
    /*
        Increase the value "1000px" of "tocbot.css" to higher value, because otherwise "ol.toc-list" could be truncated (especially if the root heading is shown).
        Do not unset the value, because the smooth transition of closing/opening collapsible list is prevented.
        Do not increase the value to max signed 32 bit, because the visible transition at the end is too fast.
     */
    max-height: 3000px;
    /*
        Both control points of the Bézier curve are in the lower-right corner.
        I.e. when the list gets uncollapsed (.i.e. it has no style `.is-collapsed` anymore), the transition
        is very slow at the beginning  (i.e. near `max-height: 0`)
        and very fast at the end (i.e. `near max-height: 3000px`, where the transition is normally not visible anymore)
     */
    transition: all 0.5s cubic-bezier(1, 0, 1, 0);
}

.is-collapsed {
    /* override the increase in ".is-collapsible" */
    max-height: 0;
    /*
        Both control points of the Bézier curve are in the upper-left corner.
        I.e. when the list gets collapsed, the transition
        is very fast at the beginning (i.e. `near max-height: 3000px`, where the transition is normally not visible)
        and very slow at the end (i.e. near `max-height: 0`)
     */
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}

This workaround still has a limit on max-height, but solves my personal problem, because the toc can be 3 times higher and the visible transition is still there.

If you like, I can prepare a PR. Or perhaps there is a better solution?

Best regards, Winfried

[tscanlin]

Hey, my only issue is that changing that value to higher numbers can affect the animation, at least the last time I checked. An option could be added to be able to specifically override this via an inline style made via JS, but for now I'd say just overriding the CSS for this use case may make the most sense.

[stenzengel]

Hi Tim,

The animation should be fine because I used a different Bézier curve for the transition for opening and closing a heading. See the comment in the code above.

In my opinion, an option would complicate the use of tocbot. More importantly, in a document with long headings where I need to set this option to a high value, this would result in a barely visible transition for short headings, which of course could also exist in this document.

Overriding is of course an option. Feel free to close this issue.

Winfried

[tscanlin]

Hey, sorry I missed that part about the bezier curve changes. That's a great idea! So does it not affect the transitions for shorter / smaller toc sections? Let me test this out locally too. Thank you!!

[tscanlin]

When I tried this out it seemed to cause a tiny bit of a delay with the animations, but wasn't too noticeable. I'm glad this solved your use case. I will be sure to refer other people here if they have the same issue and will consider adding a callout in the readme if more people run into this. Thank you!

[ghilainm]

I have the same issue here. Heading list truncated when they are a lot of titles in a section (more than 30).

I have applied the workaround suggested and it worked.

[tscanlin]

I've updated the readme to call this out here: https://github.com/tscanlin/tocbot?tab=readme-ov-file#troubleshooting

Thanks for the comment!