Checkbox list alignment incorrect

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


– PS: might be useful to include zoom level in your System Info outputs which I have seen cause unexpected changes to the UI
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

1 Like

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

Attach a copy of the note where this happens.

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

Hence the workaround is to restate the CSS with !important

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).

1 Like