Lists that are easier to view

Features
1

Only one checkbox can be inserted in each row in joplin，If I want to insert a lot of checkboxes, I need a lot of rows, which looks very unsightly.like this

image
image1102×686 63.3 KB

I hope that a row can insert many checkboxes,and the item list and the checkbox can be on the same line.Like below

image
image1212×539 128 KB

2

Nope, this is not possible, because it is not in the markdown spec. (The engine markdown-it does not understand it.)

3

You can however get something similar using css. I use the below to track my workouts

Screenshot_20211029-085140
Screenshot_20211029-085140864×225 200 KB

I'll attach the CSS later when I'm near a computer.

2 Likes
4

As promised, here is the CSS. It's been trimmed down a bit to only do what you need

ul {
	margin: 0;
    overflow-x: auto;
    display: flex;
}
ul li {
	display: inline-block;
	flex-shrink: 0;
}

input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #888;
  border-radius: 0.2em;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  /*background-color: #555;*/
  border-color: #555;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: #4c4;
  border-color: #4c4;
  color: #fff;
}

input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}
4 Likes
5

I am not particularly familiar with the rules of markdown,How does Evernote Implement this feature, do they use html?

6

Thank you very much.I used your CSS code and it can be successfully displayed on the web page. But only the text is displayed in joplin, there is no checkbox, please help me to see, what is wrong with my html code.

image
image1433×738 110 KB

In addition, joplin is not particularly compatible with html. When using html code in joplin, some html tags are often lost, such as and
.This is also a serious problem.

7

Maybe you can share more details about what's not working. This is how it looks on my computer.

image
image819×86 3.88 KB

The Markdown renderer that Joplin uses supports all html tags (as far as I know). This means that if you use an invisible html tag like <style> or <br/> then you'll need to escape them by either including a backslash \<style> or by wrapping it in backticks `<style>`.

8

I understand, you put the CSS code directly in userstyle. I always thought that you put the CSS code in the joplin editor.

9

Funny enough, for this CSS I do keep it directly in the editor. But while preparing it for you i tested it with userstyle.css :slight_smile:

If you only want this style to apply for a single note you can place the CSS in your note between style tags

<style>
....
</style>
1 Like
11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.