Les titres de quatrième niveau manquent d'un niveau de retrait

J’ai rencontré un problème lors de l’utilisation du composant DiscoTOC :
Les titres de quatrième niveau dans la barre de défilement droite semblent manquer d’un niveau d’indentation par rapport aux titres de troisième niveau.

J’ai déjà examiné le texte original et je n’ai trouvé aucune erreur de syntaxe.
image

Quelqu’un pourrait-il s’il vous plaît m’expliquer la raison possible de ce problème ? De plus, je me demande s’il existe une solution disponible pour ce problème ?

1 « J'aime »

Je pense que c’est fait exprès pour ne pas trop réduire les titres dans la table des matières lorsqu’il y a trop d’indentation.
La façon la plus simple d’obtenir un remplissage incrémental serait de cibler soit le <li> soit le <a> à l’intérieur (en utilisant leurs classes car elles ont des classes liées à leur niveau de titre) et d’ajouter un padding-left.

Merci pour votre réponse !

Cependant, la mise en œuvre de cette solution ne nécessiterait-elle pas de modifier le code HTML ? Pourriez-vous fournir des instructions plus précises sur la manière de résoudre ce problème ?

Premièrement, les titres de \u003ch3\u003e à \u003ch5\u003e ne peuvent pas être réduits dans la table des matières. Une modification du composant devrait être apportée pour permettre ce comportement. Les \u003ch6\u003e sont ignorés par le composant.

Mais puisque vous ne parlez que d’imbrication, ce SCSS devrait suffire pour ce que vous voulez :

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

2 « J'aime »

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