Fourth-level headings missing one level of indentation

support
1

I have encountered an issue while using the DiscoTOC component:
The fourth-level headings in the right-hand scrollbar appear to be missing one level of indentation compared to the third-level headings.
image

I have already reviewed the original text and have not found any syntax errors.
image
image

Could someone please explain the possible reason behind this? Additionally, I am wondering if there is a solution available for this issue?

1 Like
2

I think it’s on purpose not to shrink too much titles in the table of content when there is too much indenting.

The easiest way to achieve incremental padding would be to target either the <li> or <a> inside (using their classes as they have classes related to their heading level) and add a padding-left.

3

Thank you for your response!

However, wouldn’t implementing this solution require modifying the HTML code? Could you provide more specific guidance on addressing this issue?

4

First, titles from <h3> to <h5> can’t be collapsed in the TOC. A change to the component should be made to allow this behavior. <h6> are ignored by the component.

But since you’re only talking about nesting, this SCSS should be enough for what you want:

.d-toc-main #d-toc li.d-toc-item {
    .d-toc-h4 {
        padding-left: 1.25em;
    }
    .d-toc-h5 {        
        padding-left: 2em;
    }
}

image

2 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.