The task showed up as . (dot) instead of checkbox

[trungng2006]

Thank you for this plugin. However, when i try it out, the task in the pane show up as dot instead of checkbox.

[larslockefeer]

Hi @trungng2006, thanks for trying it out :) For me it works with an out-of-the-box installation of Obsidian. For me to understand the issue, can you share if you have a custom theme, custom CSS or other plugins added to your Obsidian installation?

[trungng2006]

You are correct. I tried on a new vault and the pane display correctly.
I think this is the problem with CSS rather than plugins. I disabled all plugins except for ToDo and the problem persisted.
Will try to probe around with the CSS and let you know

[trungng2006]

I found it:

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
}

When comment this out the box appear again

[mikeriss]

I found it:

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
}

When comment this out the box appear again

I have the same issue. How do I comment out the CSS?

[trungng2006]

I have the same issue. How do I comment out the CSS?

Try to locate that code in your obsidian.css or snippet.
Then you can delete that piece of code, or wrap the code in /* and */

eg:

/*
input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
}
*/

[mikeriss]

Thanks, I can now see the checkbox.
Although it doesnt have the feel and look of the minimal theme anymore

[larslockefeer]

@mikeriss & @trungng2006 are you both using the minimal theme?

[trungng2006]

I use gruvbox. But I copy this snippet from the minimal theme.

[mikeriss]

My guess is that its not showing a dot but instead its the actual checkbox but we are only seeing the a small portion of it. There could be too much padding. my two cents

[trungng2006]

My guess is that its not showing a dot but instead its the actual checkbox but we are only seeing the a small portion of it.

This is correct. Increasing the px in border: 1px does make the circle larger. But fails to show task done check mark when click.
I am willing to forgo the minimal checkbox for this great feature though. :D

[mikeriss]

I found the issue.
In Minimal.css under input[type=checkbox] change the padding to 7px. Check the CSS below

input[type=checkbox] {
-webkit-appearance:none;
appearance:none;
border-radius:50%;
border:2px solid var(--background-modifier-border-hover);
padding:7px;
}

[trungng2006]

Very nice! Thank you for letting me know!

[larslockefeer]

Thanks for diving into this! I'll try to reproduce with the Minimal theme enabled and see if I can prevent this from occurring with the out-of-the-box configuration of Minimal.