Tasks (checkboxes) in callouts: inconsistent starting positions (or margin) between live preview & reading view

ush · January 4, 2024, 10:39am

Steps to reproduce

In the sandbox vault, create a new note with the following content:

> [!note]
> - [ ] task

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

The callout and the task in it should be rendered the same both in live preview and reading view and should look like this:

Actual result

In live preview, the left margin of the task item is unnaturally larger than in reading view.

Live preview:

Reading view:

Environment

SYSTEM INFO:
	Obsidian version: v1.5.3
	Installer version: v1.4.13
	Operating system: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103 22.6.0
	Login status: logged in
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	none

Additional information

It seems that this bug can be fixed by making a few changes to app.css, as I described here:

CawlinTeffid · January 6, 2024, 6:49am

While Live Preview tries to present the same view rendering as Reading View, some inconsistencies will probably always remain. Spacing in particular can differ, since in editing mode it sometimes has meaning that needs to be preserved and sometimes is just hard to manage. I don’t know if the case you’re pointing out is intentional, a side effect (known or unknown), or a bug.

ush · January 6, 2024, 7:22am

You are right, but at least, I guess callouts are supposed to be displayed the same as in reading view when the cursor is not overlapping with them (as CodeMirror’s replace widgets with their DOM rendered using MarkdownRenderer or MarkdownPreviewView).

In fact, this seems to be fixed just by changing app.css a little bit.

Replace .markdown-preview-view with .markdown-rendered in the following rule:

.markdown-preview-view .task-list-item-checkbox {
  position: relative;
  top: 0.2em;
  margin-inline-end: 0.6em;
}

Add :not(.markdown-rendered .task-list-item-checkbox) to the following rule:

.markdown-source-view.mod-cm6 .task-list-item-checkbox {
  top: -0.1em;
  vertical-align: middle;
  margin-inline-start: 1em;
  margin-inline-end: 0.25em;
}

WhiteNoise · February 7, 2024, 3:20pm

thanks

bradyfish · November 24, 2024, 9:58pm

Steps to reproduce

Create a callout with a checkbox (my exact code below).

> [!Here's a callout]
> - [ ] checkbox open
> 	- [ ] nested checkbox open
> - [x] checkbox checked

## No callout
- [ ] checkbox open
	- [ ] nested checkbox
- [ ] checkbox checked

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

The checkboxes should be almost flush with the title of the callout, just like they are outside of a callout.

Actual result

The checkboxes are indented more than they should be, e.g., they are indented more within the callout than they are outside the callout.

Environment

SYSTEM INFO:
	Obsidian version: v1.7.7
	Installer version: v1.7.7
	Operating system: Darwin Kernel Version 23.5.0: Wed May  1 20:19:05 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8112 23.5.0
	Login status: logged in
	Language: en
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

Image:

Reproduced in the sandbox vault, and a fresh vault with no plugins/css modifications/etc.

bradyfish · November 24, 2024, 11:01pm

Wanted to mention that this also happens when embedding files. Here I embedded test1 inside test2 and the checkboxes from test1 are similarly indented. Reproduced on sandbox vault.

dsdrk · November 2, 2023, 10:41pm

Platform Windows 10 > Obsidian 1.4.16 > clean sandbox vault. Searched the forums and couldnt find the same issue - seems unlikely I would be the only one so wondering if its due to something on my end?

Steps to reproduce

In Preview mode, Create a note with another note embedded containing a list with list items and check box items.

Actual result

Expected result

↑ Expected result with below code disabled. Reading mode renders the same correct result as this. Just noticed now that the text is very slightly misaligned even on the preferred result-still much better.

Disabling the following code in the inspector fixed the issue. .markdown-source-view.mod-cm6 .task-list-item-checkbox {margin-inline-start: 2px;}

I implemented the following code as a stopgap in my main themed vault snippet, though.
ul > li.task-list-item .task-list-item-checkbox { margin-inline-start: calc(var(--checkbox-size) * -1.5) !important; }

Semi-related: I noticed while testing in the default vault that check boxes in a non embedded notes in preview mode are also incorrectly aligned. I haven’t tried finding a fix as Minimal theme doesn’t have this issue. As you can see the alignment of text (which is the expected result) is off compared to the above Expected result alignment.
2023-11-02 13_38_17-Embedded note - Obsidian Sandbox - Obsidian v1.4.16

Environment

– PS: might be useful to include zoom level in your System Info outputs which I have seen cause unexpected changes to the UI
SYSTEM INFO:
Obsidian version: v1.4.16
Installer version: v1.4.13
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on
RECOMMENDATIONS:
none

CawlinTeffid · November 4, 2023, 10:33pm

I’m a little confused — the screenshots don’t look like embedded text and appear to have a callout involved that isn’t mentioned.

WhiteNoise · November 4, 2023, 11:27pm

Attach a copy of the note where this happens.

bardbess · November 5, 2023, 5:56am

Different OS same issue. Specific to live preview where this CSS is being overwritten

Hence the workaround is to restate the CSS with !important

dsdrk · November 5, 2023, 8:55am

Apologies @CawlinTeffid, Yes – these are callouts, I forgot to mention as encountered initially while embedding a note in one but then realised they were displaying in any embedded note, not just callouts ~ while in preview mode.

@WhiteNoise Any note with the provided instructions implemented.

Thanks @bardbess for the second proof (now I know its not just me).