Vertically align checkbox and task text in Live Preview

Help
1

Steps to reproduce

  1. Launch Obsidian
  2. Install Tasks plugin
  3. Create a task in a note
  4. Create a Tasks block in the same note using:
```tasks```
  1. Switch to Live Preview mode

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

Yes. Tried in multiple themes too.

Expected result

The checkbox and the task text that are rendered by the Tasks block should be vertically centered.

Actual result

Currently the checkbox and the task text that are rendered by the Tasks block are misaligned. The bottom of the checkbox is aligned with the bottom of the task text. This is reproducible with several themes including Default, Cupertino, Minimal, Simple, and Things. The goal is to move the task text up until it is vertically centered with the checkbox. Then it will match the layout that Obsidian shows outside of the Tasks block.

Environment

SYSTEM INFO:
Obsidian version: v1.8.9
Installer version: v1.8.9
Operating system: Darwin Kernel Version 24.3.0: Thu Jan 2 20:24:24 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6030 24.3.0
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 4
Plugins enabled: 3
1: Tasks v7.18.4
2: Calendar v1.5.10
3: Smart Typography v1.0.18

Additional information

bug
bug828×309 13.3 KB

Note: The bug is not reproducible in Reading Mode:

426252623-c6fc4811-d43c-45e2-9e33-341e8e491d5f
426252623-c6fc4811-d43c-45e2-9e33-341e8e491d5f1614×671 79.9 KB

2

Sorry. we don’t take bug reports involving third party plugins.

3

Totally understand. The Tasks team pointed me here because they believe the bug is with Obisidan’s Live Preview feature and not the plugin. The behavior was reproducible with both the Tasks and Dataview plugins.

4

In some sense I believe it comes down to the fact that live preview and reading mode uses two different rendering engines to render the markdown. When you’re using tasks or dataview (or most likely any plugin able to render task lists) they’ll utilise the reading mode engine, even when the query is executed in live preview.

In other words, I reckon that you would see the same rendering difference if you compared live preview to reading mode. This is a known deficiency in Obsidian, and it’ll persist as long as two rendering engines are used.

It can to some extent be nullified through CSS, but the differences in the underlying html markup makes this an almost impossible task. And the difference is called for in order for editing to be achievable in a decent matter. (This is slightly simplified)

5

That is a mis-representation of what I said - see Tasks issue #3393

Understood. Shall I post about it here? https://forum.obsidian.md/

Chances are it’s already reported. But they generally won’t take bug reports involving plugins…

I would probably start by asking for help in the #appearance channel on the Obsidian Discord, and see if anyone has any ideas.

6

This may be true, but the layout is definitely different in live preview, as the screenshots above show, when you look at the vertical offsets of the checkboxes within their lines, in Live Preview versus Reading Mode.

My suspicion is that there are inconsistencies in Obsidian’s CSS margin-type variables that control the vertical positioning of checkboxes within task lines.

But all of this is moot because:

  • It is only visible to users when plugins are enabled
  • The Obsidian team understandably declines any bug reports with plugins enabled

So I am at a loss to know how to create a bug report reproduction for it (which is why I pointed the user to the #appearance channel, to see if they had any ideas of how to create a reproduction.)

7

I agree with you on this, and my main point is that as long as our queries are using the reading mode rendering, even when we’re in live preview this difference is noticeable. Looking at a rendered query result next to native tasks, will at the same time use both the reading mode and the live preview rendering.

So the “issue” is potentially to make that vertical alignment be the same in both live preview and reading mode. Most people will not notice it though since they’re not using both modes at the same times, and I’ll not be surprised if the Obsidian team would deem this as so insignificant that they’ll not use too much time to really align them.

And possibly, it could be hard to get that alignment correct too, since the underlying html elements are different in live preview and reading mode.

Here is an image visually showcasing how every rendering except for the native task rendering in live preview is the same (or seems to be the same):

image
image1419×773 98.7 KB

Notice how the blue lines have a slightly larger gap, than all the green lines. And I’ve tried my best to align the lines to the bottom of the todo circle using the default appearance, with a little bit of zoom.

8

Thanks for that screenshot.

It would really help if you could do the following, so I can point you to what the user was seeing…

  1. Install and enable the Theme Design Utilities plugin
  2. Reload the vault
  3. Run its command: Theme Design Utilities: Toggle Red Outlines for Debugging
  4. Paste an updated screenshot here
9

Yikes… Here is the same rendering after that command has been run:

image
image1563×890 118 KB

It do confirm my suspicion/hypothesis related to how every rendering besides the native tasks rendering in live preview is the same.

11

I tried fixing by making li’s use:

display: flex; align-items: center;

Unfortunately this ides not work if the task text wraps to a second line.

12

GOT IT. So happy.

ul > li.task-list-item {
display: flex;
align-items: center;
flex-wrap: wrap;
}