search

zadam / trilium

Build your personal knowledge base with Trilium Notes
GNU Affero General Public License v3.0
27.2k stars 1.9k forks source link

Numbers in Table of Contents loop to 0 #3129

Closed anantone closed 2 years ago

anantone commented 2 years ago

When using more than 9 headers, table of contents number loop back to 0, 1, 2... instead of 10, 11, 12... (see attached screenshot)

Sure, I would usually use individual notes and list them in parent, but here each header content is very short, so this would make more sense (just need ToC to navigate easily within the list).

Is there a straightforward fix for this?

Screenshot_2022-09-14_09-32-21

chdagenais commented 2 years ago

Weird as I have a similar note and numberins is normal (9...10..11) is it possible the 1 is hidden behind the parent div ?

How does it look if you set higher padding for .toc-widget (20 instead of 10):

.toc-widget {
    padding: 20px;
}
anantone commented 2 years ago

Thanks for the answer, it is definitely a good hypothesis, as in the desktop app I can get a glimpse of the missing 1s. But not at all in my browser (see attached images, browser is first, desktop second).

But I created a CSS note, added the #appCss label and copy/pasted your suggestion for extra padding, reloaded the frontend, and that didn't change anything (neither in desktop nor browser).

I'm using a custom theme in both instances, melon-4, in whose CSS I couldn't find an existing .toc-widget entry. But I thought that my CSS note should override other sources??

Don't know what more to try...

Screenshot_2022-09-14_22-10-25 Screenshot_2022-09-14_22-10-39

zadam commented 2 years ago

Hi, looks to be similar to #3025.

anantone commented 2 years ago

It does indeed. I don't have the same experience when activating/deactivating custom theme, but the clue seems to be "font size". I'm struggling a bit with the CSS though, finding what to adjust where (newbie problems). I'll investigate and report the precise method.

anantone commented 2 years ago

I'm happy to report that this is solved, thanks to the author of the theme. Here is his solution, if that can help similar problems in other themes:

https://github.com/raphwriter/trilium-theme-melon/issues/12#issuecomment-1248235329

`/ ----------- RIGHT PANE ------------ /

div#right-pane.component { margin-left: 10px; }

div#right-pane.component div.card-header { border-radius: 0; font-family: var(--font-headers); font-weight: normal; }

div#right-pane.component div.card-header .toc > ol { padding-left: 15px; }

div#right-pane.component div.card-body .toc > ol > ol li { list-style: lower-latin; }

div#right-pane.component div.card-body div.toc-widget { padding: 0 1rem; contain: none; overflow: auto; } `