To Do Checkboxes and Formatting

Would like to see checkboxes line up better with the text to the right of the box and to keep the left margin and NOT go under the checkbox https://share.getcloudapp.com/GGuoO9zx
Thank you

Sounds like a CSS issue

If you have a blank line between lists it may become a fragmented list. Some of the themes don’t handle it well and cause what you describe. Try turning off the custom css and see if it is fixed, or try another theme.

I started with no theme and it was the same result. The check box is much lower than it should be to look good on a page or printed doc. This morning I switched to a theme to test and it was identical.

No blank line. Just one checkbox and the checkbox is off center to the sentence next to it. And when I add multiple checkboxes the same thing.

Maybe. Im not that technical to know. Just wanted to voice it to see if it could be changed because I use a lot of checklist. thanks

Im open to hear about any ways to fix this now rather than waiting for a hard coded update if someone knows CSS.

Could you post a screen shot, maybe that could help?

It should be possible to do a CSS fix, but it will need to be put in your theme on a per-Vault basis. To make sure I get it looking right for yours, can you tell me which theme you’re using, or are wanting to use?

I have the same problem and need help with the css:

The effect of my current css (no themes applied):

Current css lines need fixes:

ul, ol { font-size: 13px ; line-height: 120% ; margin-left: 9% ; padding: 0px 0px 0px 0px ; margin-top: 0px !important; }
li, li p { font-size: 13px ; line-height: 120% ; margin-left: 0% !important ; padding: 1.5% 0px 0px 0px ; margin -top: 0px !important; }
.task-list-item-checkbox { margin-left: 9% ; margin: 0px 0px 0px 0px ; }

THE PROBLEMS

Editor view:
After checkbox, the left alignment of first line vs subsequent lines is not perfect.

Preview:
Same as OP, lines wrap under checkbox.

I haven’t figured out a solution for the editor, but here’s one for the preview:

div.markdown-preview-view li.task-list-item {
  text-indent: -27px;
  margin-left: 0;
}

Put that in obsidian.css just inside your vault, and make sure custom CSS is enabled under the appearance settings. If you decide to use another theme, you’ll need to paste the above into it, and maybe play with the -27px to fine tune things.

1 Like

“text-indent: -19px;” solves the Preview side.
Thanks @DanielFlaum !

I think we fixed this.