Snippet to hide completed tasks in Live Preview?

Custom CSS & Theme Design
1

I couldn’t adapt this snippet, which works in reading mode, for Live Preview. Any help? :pray:

.markdown-preview-view ul > li.task-list-item.is-checked {
  display: none;
}

The snippet must hide both the tasks and any of their children.

Yes, there’s a plugin for that™ but I don’t like to rely on community plugins when it could be accomplished w/ a few lines of CSS.

2

This snippet works for me:

/* Hide done tasks. Marked as "X" */
/* Edit mode*/
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
  display: none;
}

/* Reading mode */
ul > li.task-list-item[data-task="x"],
ul > li.task-list-item[data-task="X"] {
  display: none;
}

… but I have a problem when I want to apply this only to certain notes through “cssclasses”.

I am not sure if you can achieve to hide also children, as they’re rendered as separate elements, just with styled indent.

Cheers, Marko

3

Thanks. The original snippet for reading view hides all children. I wonder why the same can’t be achieved in Live Preview :thinking:

I wonder if the Tasks plugin can help with this…

4

If you look in developer tools and looks at the Elements pane for a list in live preview you’ll discover that a list is not hierarchical, it’s flat. Each line is its own <div>, so basically the a sub-item is at the same level as its parent. This makes it a lot harder to achieve stuff like this within live preview versus in reading view where we’ve got the proper hiearchy of the list.

Theoretically though, it can be done by writing some massive CSS selectors where you utilise the fact that these <div>'s are tagged with classes like HyperMD-list-line-1, and HyperMD-list-line-2, and similar for lower levels. So it should be doable to write neighbouring CSS selectors, but it would require quite some fiddling about I think to get it correct.

1 Like