Can not have multiple tasks on single line?

[Lise]

I just tried putting multiple task boxes on the same line (both in my vault and the sandbox) and it didn’t work.

What I want:

Here’s what I get instead (in reading mode):

Is this a bug?

(I want a list of all the countries such that when I watch a film from that country, I mark it. I don’t want one country per line because the list is too long).

[anon63144152]

My understanding is that tasks are list items (one per row), not table items (multiple columns).

You could do it manually with emoji or similar:

Albania Algeria 𐄂

However, this can’t be queried in any useful way (which may or may not be important to you).

[smiggles]

As eightning said, tasks are list items. You cannot do it using traditional means. However, it can be done!

Solutions

Option 1: Using HTML

<input type="checkbox"> Albania <input type="checkbox"> Algeria <input type="checkbox"> Andorra <input type="checkbox"> Angola

Pros

• No need for CSS snippets

• You can switch between styles within the same file

• Easy to remember

Cons

• Not recognized by Dataview Plugin, Tasks Plugin, or Themes
• You cannot mark tasks as complete in preview by clicking
  You can add checked like so, <input type="checkbox" checked>
• Weird spacing on the left (you can use CSS)
  

input[type="checkbox"] {
    margin-left: 5px;

Option 2: Using CSS

.inline-task .task-list-item, .inline-task .HyperMD-list-line {
    display: inline-flex;
    margin-right: 28.5px;
}

Pros

• Recognized by Dataview Plugin, Tasks Plugin, or Themes

• Works the same as usual

• Easy to customize

Cons

• In Preview Mode, the tasks will be displayed across multiple lines (like normal)

You can download the CSS snippet here
inline-task.css (211 Bytes)

[Lise]

Yeah, that’s what I figured would be the alternate.

I have a distinct member of being able to put mutliples in one line.
Maybe 2 years ago I had an Oscar nominee list, and I could swear I had to “checkboxes” side by each. I used the first for who won and I used the 2nd for my pick. I suppose it could have been Evernote, but I had given up on them by that time. Anyway, I guess what matters is how tasks act now, regardless of how they may have acted before.

[Lise]

OH, that’s a nice workaround. Thanks! I’ll try both ways and see what works best.

[smiggles]

You’re welcome! I made some adjustments to the CSS snippet I gave you

/* ---------- HTML Version (Unqueried) ---------- */

/* Spacing Adjustments */

input[type="checkbox"]:not(:first-of-type) {
    margin-left: calc(var(--list-indent)/2);
}

input[type="checkbox"]:first-of-type {
    margin-left: calc(var(--list-indent)/3.5);
}

/* ---------- Markdown Version ---------- */

.inline-task .task-list-item {
    display: inline-flex;
}

.inline-task .task-list-item-checkbox:not([data-line="0"]) {
    margin-left: calc(var(--list-indent)/3.75);
}

I used dynamic selectors, built in variables, and math to make the spacing more consistent and precise (should fit in with most themes)

The HTML version is now aligned with the markdown of built in lists and checklist/tasks

I also replaced the px values with em (allows for a better font size experience and all the loveliness of em)

Very small detail changes BUT it definitely made things look cleaner

Custom Classes Plugin

obsidian://show-plugin?id=custom-classes

You can use this plugin to apply the variable to specific lists. As a result, you can flip-flop between the two within the same document

Bug(?)

After a line break, the css class will still apply to the same element. You need to use --- or split with a different element to stop this from happening

Previews

[merlinuwe]

I use only the last part of your css code in .obsidian/snippets/checklist_nebeneinander.css

This is what I get from

- [x] a - [x] a - [x] a

(Standard and minimal theme.)

What am I doing wrong?

[smiggles]

Hello! The snippet only changes how they look, not how obsidian processes lists because its only CSS.

You need to type the lists how you usually would,

- [ ]
- [ ]
- [ ]

[merlinuwe]

@smiggles

/* ---------- Markdown Version ---------- */

.inline-task .task-list-item {
    display: inline-flex;
}

.inline-task .task-list-item-checkbox:not([data-line="0"]) {
    margin-left: calc(var(--list-indent)/3.75);
}

I tried it with latest obsidian, but it does not help. Not in standard theme, nor in minimal theme. I also deactivated all of my css snippets. Have you an idea, where I can look to solve my problem?

In the background you see my working obsidian, in the foreground there is a testvault with no plugins and css-snippets (only yours, activated.)

This is the code of the .css file.

[smiggles]

Are you putting inline-task in your frontmatter?

The CSS only applies when a document calls for the class inline-task using cssclass: inline-task in the frontmatter

If you want to apply it universally remove the inline-task class from the css properties like so,

/* ---------- Markdown Version ---------- */

.task-list-item {
    display: inline-flex;
}

.task-list-item-checkbox:not([data-line="0"]) {
    margin-left: calc(var(--list-indent)/3.75);
}

I should’ve made that clear originally, my apologies

[merlinuwe]

Thank you, we come nearer to solve it:

Now with

/* ---------- Markdown Version ---------- */
/* https://forum.obsidian.md/t/can-not-have-multiple-tasks-on-single-line/56507/5 */


.task-list-item {
    display: inline-flex;
}

.task-list-item-checkbox:not([data-line="0"]) {
    margin-left: calc(var(--list-indent)/3.75);
}

[smiggles]

Originally it was optimized on my laptop, I was worried it could be an issue with that. Tested it, and it appears on mobile that the css snippet needs higher prioritization

Add !important to the declarations like so,

/* ---------- Markdown Version ---------- */

.task-list-item {
    display: inline-flex !important;
}

.task-list-item-checkbox:not([data-line="0"]) {
    margin-left: calc(var(--list-indent)/3.75) !important;
}

Your previous themes and snippets can be reenabled! There shouldn’t be any conflicts

[merlinuwe]

Aaaah, that did it, on PC and on Android mobile.

Thank you very much!