View sync when [toc] is added

Support
1

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

Screenshot from 2020-09-26 09-13-34
Screenshot from 2020-09-26 09-13-341380×902 88.6 KB

1 Like
2

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

1 Like
3

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

4

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.

5

Thanks @uxamanda

1 Like
6

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
7

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.

8

Yes it’s fine enough for me too

9

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