View sync when [toc] is added

When I add [toc] at top in a note, I expect the view to remain in sync but TOC pushes the view further down as it renders TOC.

Please see screenshot. Is there a setting to fix the view syncing?

Thanks

1 Like

You might want to try floating the TOC with CSS. Examples here: Toc as the sidebar

1 Like

That's a good idea because it's nice :wink: but with version 1.2.2 even with floating TOC, views are not synchronized. But it's still a beta version, so it will be probably fix

I have actually gone back to the default theme with 1.2.2 so I can get a feel for it, so haven't been using floating TOC with it yet. I am planning to do another iteration on my theme at some point soon. I will take a look then to see if I notice why they are out of sync.

Thanks @uxamanda

1 Like

Added a basic floating TOC. This has more variables than needed since it is from my old theme, but should get you a basic TOC :-).

:root {
	--white: #e3e3e3;
	--dark-white: #EEF0EA;
	--light-grey: #A3A79F;
	--grey: #575856;
	--dark-grey: #272728;
	--darker-grey: #1D2024;
	--black: #131517;
	--base-size-1: 1px;
	--base-size-4: 4px;
	--base-size-8: 8px;
	--base-size-10: 10px;
	--base-size-13: 13px;
	--base-size-18: 18px;
	--base-size-24: 24px;
	--base-size-32: 32px;
	--base-size-40: 40px;
	--base-size-272: 272px;
	--z-toc: 99;
	--font-weight-light: 200;
	--font-weight-base: 400;
	--font-weight-bold: 500;
	--font-sans: "IBM Plex Sans";
	--font-mono: "IBM Plex Mono";
	--primary: #0097DB;
	--secondary: #00dbcc;
	--font-line-height: 1.4em;
	--font-size: var(--base-size-13);
	--icon-size: var(--font-size);
}

nav.table-of-contents>ul {
	top: 0;
	right: 0;
	position: fixed;
	z-index: var(--z-toc);
	background: var(--dark-grey);
	padding: var(--base-size-8);
	border-radius: var(--base-size-4);
	max-width: 20%;
	font-size: calc(var(--font-size)/1.3) !important;
	max-height: var(--base-size-272);
	overflow: scroll;
	opacity: 0.8;
	padding: var(--base-size-8) !important;
}

nav.table-of-contents ul {
	list-style-type: none;
	margin-left: var(--base-size-4);
	line-height: 1.2em;
	padding: 0;
	margin-top: 0;
}

nav.table-of-contents li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0;
}

nav.table-of-contents li a {
	padding: 0;
	color: var(--light-grey) !important;
	text-decoration: none;
}

@media all and (min-width: 920px) {
	nav.table-of-contents>ul {
		height: 100%;
		max-height: 100%;
	}

	#rendered-md {
		width: 75%;
	}
}
3 Likes

If I scroll very quickly they get out of sync, but I have found that scrolling back up slightly syncs them up for me. Not sure if that is being addressed or not, but it is usable for me as is.

Yes it’s fine enough for me too

Thanks @uxamanda

I combined it with

<details markdown='1'>
<summary>Table of Contents</summary>

[[TOC]]
</details>

I tried to scroll as fast as possible with hyper-scroll but it didn't go out of sync for me.

2 Likes