Checkbox misaligned in reading mode when varying zoom level

Steps to reproduce

  • create a note with a checkbox
  • add child bullet points of any style under the checkbox

eg.:

- [ ] correct alignment checkbox
- [ ] misaligned checkbox
    - child dot point; or,
    - [ ] child check box

Expected result

All level 1 checkboxes should be aligned with each other.

Actual result

The checkbox that has children receives additional indentation which misaligns it with all other level 1 checkboxes. See the image below where I have disabled my custom theme, custom CSS, and turned on safe mode to disable all of my community plugins.

image

Environment

  • Operating system: Windows 11
  • Debug info:

SYSTEM INFO:
Obsidian version: v1.1.15
Installer version: v0.15.9
Operating system: Windows 10 Pro N 10.0.22000
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: off
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

1 Like

Can confirm in Sandbox vault (in Reading mode):

1 Like

I am not sure I see the problem. Download and reinstall obsidian. Post a screen shot of this happening in the sandbox vault and attach a file where this happens.

Ok, I believe AlanG did this above, but I have reproduced it in the sandbox vault too.

Here is a gif that demonstrates the issue. Notice that it it more pronounced at lower zoom levels, and may look normal at very high zoom levels:

align

Here is an example file. It’s the same example that I included in the original post.

Example.md (107 Bytes)

I can’t reproduce. Download and reinstall Obsidian.

It’s in the reader! You never said it.

Ah sorry, I never use the Live Preview mode so the distinction between editor and reader is night and day for me, forgot that that’s not true for everyone.

For completeness, the same issue actually exists for all bullet styles, not just checkboxes.

Here is an example with ordered and unordered lists.

align

And the contents of that file if that’s helpful:

1. | <- test line
2. | <- lines up here
3. | <- should line up here
	1. but not when I have a child bullet point

- | <- test line
- | <- lines up here
- | <- should line up here
	- but not when I have a child bullet point

it’s caused by this right padding on the list collapse indicator, can this just be turned off? that doesn’t seem to cause issues for me

before disabling padding-right CSS attr:

after disabling padding-right CSS attr:

will be fixed in v1.2. No ETAs.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.