Home / GitHub Page

Checkbox within table cell

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
1 Like

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.
Checkboxes
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->&check;</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.

1 Like

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 :thinking:

See for custom CSS per note also the discussion in Custom stylesheets.