Is there a way to use a checkbox within a table cell? I tried the solutions here but can’t get it to work.
No it’s not possible due to a limitation of the underlying Markdown renderer.
I’m trying to use Joplin as a digital bullet journal as shown here. Another thing I was trying to do was to have multiple checkboxes on a single line, but it seems like that isn’t possible either.
Is it not possible to use html for checkboxes? <input type="checkbox"> doesn’t seem to work, it just shows a text input box.
Never mind. <input type="checkbox"> does work. The problem was that I must have copy and pasted it from the web and used left and right double quotes instead of regular double quotes: <input type=“checkbox”>.
Edit: While the html checkbox works, the checked property doesn’t get saved. Guess I’ll have to look at other software options for a digital bullet journal.
I am starting digitizing my BuJo in Joplin. I think the best way for keys and signifiers is using emojis and keyboard. For example:
Main keys and modifiers:
| Key | Meaning |
|---|---|
| ☐ | task incomplete |
☑ |
task completed |
| ☒ | task cancelled |
| ◪ | task in progress |
◀ or < |
task scheduled in future log |
▶ or > |
task migrated to collection |
| O | event |
| ⊗ | event cancelled |
| ◑ | event in progress |
| ⓘ | info/note |
Signifiers:
| Key | Meaning |
|---|---|
| ? | Question |
| ❛ | Quote |
| ⟲ | Recurring |
| ⚹ | Important |
| ◆ | Milestone |
👁🗨, 👁, 👀, or 👓 |
explore more |
♡ |
Enthusiastic about |
💡 |
Idea |
🔗 or ∞ |
Link to |
5 Likes
Here’s my checkbox adventure. Setting up my family tree in December, I tried to mix a checklist with an unordered list as in this simplified example:
- **Gerard**
- [x] Hendrik
- [ ] Izaäk
- [ ] **Johannes**
- Karel
- Lodewijk
Gerard is dead, and does not need a checkbox anymore. Karel and Lodewijk are too young for a checkbox.
The indentation in the viewer was a mess and irreparable. I was about to propose a self-contained checkbox — to be evoked with ?[ ] or whatever — anywhere in a Markdown paragraph, list, or table, when I understood that it’s “a bridge to far” at the moment. I don’t totally give up all hope (the Rhine was crossed, eventually), but it won’t happen in 2020, I guess.
So how to make do with checkboxes that don’t feed back to the Markdown document? To prevent false expectations in the viewer, I avoid the <input> tag for this. The most simple and typist-friendly solution would be the left one below.
In Markdown:
- **Gerard**
- `[x]` Hendrik
- `[ ]` Izaäk
- `[ ]` **Johannes**
- Karel
- Lodewijk
If you want something more fancy in the viewer, you have a lot of options. The second list is one of my favorites.
<style>
chk- {
border-radius: .25em;
background-color: #E4E4E4;
color: #0269C2;
font-family: IBM Plex Mono;
font-size: 95%;
font-weight: bolder;
padding: 0 .32em;
white-space: pre;
}
</style>
- **Gerard**
- <chk->✓</chk-> Hendrik
- <chk-> </chk-> Izaäk
- <chk-> </chk-> **Johannes**
- Karel
- Lodewijk
It makes use of cheating techniques as I’ve mentioned here. In this case I use just one false HTML tag to define a checkbox. My most favorite layout however is the list at the right side, that needs four false tags and a lot of CSS:
<style>
bl- {
position: relative;
left: -1.7em;
}
bl- li {
list-style-type: none;
}
b---::before, o---::before, x---::before {
border-radius: .25em;
font-weight: bolder;
content: "✓";
padding: 0 .2em;
margin-right: .25em;
}
b---::before {
position: relative;
top: -.8em;
border: 2px solid #999999;
border-radius: 8em;
color: transparent;
font-size: 30%;
line-height: 90%;
margin: 0 1.9em 0 .9em;
}
o---::before {
background-color: #E4E4E4;
color: #E4E4E4;
font-size: 105%;
}
x---::before {
background-color: #E4E4E4;
color: #0269C2;
font-size: 105%;
}
</style>
<bl->
- <b---/> **Gerard**
- <x---/> Hendrik
- <o---/> Izaäk
- <o---/> **Johannes**
- <b---/> Karel
- <b---/> Lodewijk
</bl->
The possibly font-dependent CSS metrics are good for a strong headache. Logic and arithmetic didn’t suffice for me, a lot trial and error was involved to get everything positioned as I wanted. Moreover, I also needed some corrections (not shown here) for tables, because I had reduced their font size to 90%. The checking/unchecking process, on the other hand, is rather comfortable: the checkboxes are easily spotted in the Markdown text, and only one character has to be changed to check or uncheck the box.
Last Monday, after a few months, I picked up my writing of a ‘testament’ for my successors again. This time I used Joplin for note-taking, as an experiment. I created an annotated outline as an ordered list, and two tables of software components and their grouping. All three with the homebaked checkboxes of the third kind. And I can testify now from my own experience: once the style definitions are settled, it’s quite workable. Although that doesn’t smother my ardent desire for a real self-contained checkbox with feedback.
3 Likes
if that works, a option to insert custom CSS per note, would be helpful, wouldn't it?
That could and up in kind of theme plug-in model 
1 Like
See for custom CSS per note also the discussion in Custom stylesheets.
I know that block-level elements are not supposed to be inserted into GFM-flavored MD table cells. But I found the following MD code to work just fine in Joplin :
|AAA|BBB|CCC|
|---|---|---|
|ddd|eee|fff|
|ggg|- [ ] hhh|kkk\
||- [x] iii|\
||- [ ] jjj|
|lll|mmm|nnn|
Result :
Any reason NOT to do that ?
3 Likes
Yes, because in Joplin it only works with checkboxes in single column/row. If you are in need of more checkboxes in the same row it will not work as expected. Try example below in Joplin, here in the browser it seems to work correctly:
|AAA|BBB|CCC|
|---|---|---|
|ddd|eee|fff|
|- [ ] ggg|- [ ] hhh|- [ ] kkk\
||- [x] iii|\
||- [ ] jjj|
|- [ ] lll|- [ ] mmm|- [ ] nnn|
Result:
| AAA | BBB | CCC |
|---|---|---|
| ddd | eee | fff |
| - ggg | - hhh | - kkk\ |
| - iii | \ | |
| - jjj | ||
| - lll | - mmm | - nnn |
If you active checkbox in one row and click on another checkbox in the same row but other column, all the checkboxes in that row get disabled.
But maybe you even have a workaround for this problem?