Spacing issue in live preview mode

[tcsavage]

When using Obsidian's new Live Preview edit mode, the table of contents is way more spaced-out when compared with reading mode (to an uncomfortable degree in my opinion). My expectation is that the TOC should look more-or-less the same spacing-wise between live preview and reader mode. Lists generated by other plugins (e.g. Dataview) do not exhibit this problem for me.

I've included a screenshot showing the same file in edit mode (source), edit mode (live preview) and reader mode:

Things I've tried (without success):

• Switching-back to the default theme
• Disabling all CSS snippets
• Disabling all other plugins

I'm running Obsidian v0.13.17 (installer v0.13.14) on macOS and Linux. I've observed this behaviour throughout the v0.13.x release cycle.

[Aidurber]

Yeah, I noticed this too when testing out live preview. Didn't think much of it, I'll take a look to see if there is anything I can do. Thanks for the report

[Aidurber]

I'm confused by this. I've generated a list with Dataview, and it's working fine. ToC still has massive gaps between everything.

I've compared the output HTML between DV and ToC and it's almost identical. The only difference being that links are wrapped in span, I tried that and it appeared the same. Even the CSS for the rendered elements is identical.

I also use the same mechanism that DV uses MarkdownRenderer.renderMarkdown() I'm rendering valid Markdown.

Dataview is also experiencing this issue in certain scenarios:
blacksmithgu/obsidian-dataview#743

I'm going to have to put this on hold and presume it's a bug with Live Preview 🤷

[tcsavage]

Interesting. I don't use dataview a lot, but the problem hadn't yet presented to me in the couple of dataview blocks I use. Worth keeping an eye on. I appreciate you taking a look for me. Cheers!

[tcsavage]

Based on a comment on the dataview issue I created a CSS snippet which fixes the problem for me:

https://gist.github.com/tcsavage/baee0634e6041d6f9773076d12b1e419

Basically copy-and-paste from the Admonition CSS.

[Aidurber]

@tcsavage Nice! Cutting a release now, just need to make sure that everything gets packaged correctly. This plugin doesn't use styles already.

[Aidurber]

@tcsavage I've released 0.0.23, that seems to have resolved the issue. I'm going to close this ticket, feel free to comment again if you still experience issues with it.

[shane-yao]

Hi, this problem still occur in new release plugin(release-0.0.26)，and obsidian version is v0.13.23.

I had tried open with a complete new vault, and installed only toc plugins, theme using default(light/dark).That didn't fix.

I also tried tcsavage's snippets, still not work.Any idea?

[shane-yao]

This is odd problem.I don't think it's a css issue.
First, the gap is selectable, like pic below:

Second, I tried using console, editing

html and remove all it's line break in html, it works, the gap is disappear.



Most rear thing is, in preview mode, ol html code do have line break, but some how don't affect the element

[shane-yao]

OK，I think I got the problem.It's similar to tcsavage's solution, but his css white-space attribute is only for ul, this is ol.

Problem solve by assign ol's white-space attribute