HTLM checkbox one pixel

[Tweetyblue]

Hi,

When I code a checkbox with HTML it appears in only one pixel in rendition.

https://nsa40.casimages.com/img/2021/02/17//210217084813480133.png

[radekkozak]

Hi, thanks for letting me know. I checked your issue and it seems to be the problem with all themes that override default checkboxes by modifying appearance (i checked with Minimal and others). There is easy solution for your case:

1. If you want to have both - Discordian checkboxes and your custom ones (as in your screenshot) i propose adding simple css class "default" to input and using my attached CSS snippet

non-discordian-checkboxes-snippet.zip

by dropping it in .obsidian/snippets folder - this should revert your own checkboxes to a user-agent-stylesheet like or simply default it. This would be quickest solution for now, so sth like this

<input class="default" type="checkbox" id="TEST" name="TEST">

or

2. I can fix this inside whole theme provided that such custom inputs won't use class="task-list-item-checkbox" which is used for all the standard checkboxes in Obsidian

/cc @Tweetyblue

[radekkozak]

Let me know if that helps and what would be the most convenient way for you

[Tweetyblue]

Hi,

Thanks for your help.

Therefore, the first solution seems not working. I'm not familiar with HTML and CSS (and english is not my first language, so I may not quite understand) so I may do it wrong.

I have put the file in the snipet folder and tried the code but I have the same issue. Only one pixel and not text following it.

Yet, I haven't understood your second solution, sorry.

I use HTML checkboxes because I can't put CSS ones in tables.

This is what I'd like to do, whatever the type of checkbox used.

https://media.discordapp.net/attachments/694233507500916796/811660238981431326/unknown.png

[radekkozak]

Hi again. No problem. Ok so just want to makes sure - did you enable snippet in Obsidian settings ?

In "Appearance" menu you may need to refresh them and toggle like in my screenshot (sometimes Obsidian need a restart as well)

Second - very important - is to add class="default" in your <input> as i mentioned before. Have you ?

<input class="default" type="checkbox" id="TEST" name="TEST">

I tried this solution myself before writing and it works so please let me know All best

[Tweetyblue]

Indeed, I hadn't enabled snippet CSS. It works perfectly now ! Many thanks for your help.

[Tweetyblue]

Therefore, the boxes checked are not saved. When I reload Obsidian, there is the error message :

https://nsa40.casimages.com/img/2021/02/18//210218070559207613.jpg

[radekkozak]

Hi, not sure what you did there to get the error - no such error for me when reloading Obsidian. If you could provide console crash report i could maybe help but the error alone doesn't help me with debugging your issue.

Anyway i asked developers of Obsidian and turns out there is no way to have fully functional checkboxes in markdown tables - "there is no such thing in Markdown specification and therefore no such possibility in Obsidian"

So this is not a Discordian problem but Markdown/Obsidian

The only solution i can give you for Obsidian to remember checked / unchecked status is to manually set your checkboxes in editor:

1. for having boxes checked use like below

<input checked class="default" type="checkbox" id="TEST" name="TEST">

2. for having boxes unchecked just remove 'checked'

So sth like this:

<div>
    <input checked class="default" type="checkbox"  id="TEST" name="TEST">
    <label for="TEST">TEST</label><br/>
    <input class="default" type="checkbox" id="TEST" name="TEST">
    <label for="TEST">TEST</label>
</div>

This should remember the states when reloading - but be aware as said before - you can't have functional checkboxes in tables - meaning: you can just click & unclick and have the status remember like with normal checkboxes outside the tables /cc @Tweetyblue

[radekkozak]

Also if you want those checkboxes look the same as other Discordian checkboxes use class="task-list-item-checkbox" instead of class="default" so:

<input checked class="task-list-item-checkbox" type="checkbox" id="TEST" name="TEST"> should render those checkboxes same as others - see below

/cc @Tweetyblue

[Tweetyblue]

Once more, thank you for your help.

Where can I find the console crash report, please ?

So, if I understand, there is no way to have working checkboxes in tables, unless I put or remove "checked" manually in the HTML code, right ?

Is there another way to have several normally working checkboxes on the same line ? Or having columns without table ?

Or a way to embed them from somewhere else ?

[radekkozak]

Hi, happy to help.

Yes, that's correct - there is no possibility of checkboxes in tables and that's purely consequence of Markdown Specification. Obsidian after all is just a markdown editor underneath. To see what's possible check out original Markdown syntax by John Gruber and for example Github Flavored Markdown spec which extends it with task lists / checkboxes

Exactly the same answer as above when having multiple checkboxes in same line. Specification is your best friend in any doubts what's possible and what's not. The only solution is of course doing it in pure HTML but it is essentially stateless so you won't be able to remember clicks/states in checkboxes that way

For console crash reports in Obsidian you can go to View -> Toggle Developer Tools - you will have there normal Developer Tools window as in any browser. There is console there. I advise to report it straight to Obsidian devs if this is sth Obsidian-related. They are very helpful people

[Tweetyblue]

Hi,

I have no error message anymore. I should have solve it.

So, thank you once more, I'll try another solution. Maybe I'll create a table online and embed it on a note. I have to think about it.

[radekkozak]

You got it. Closing this now. Hope you find your solution. Good luck