Aligning of checkboxes

Features
1

When importing Wunderlist checklists into Joplin, I noticed something has changed 1.0.193 or little earlier. Checklists can be mixed with (un)ordered lists without creating a messy layout now. I guess it could have something to do with #2408. It makes me happy and my workaround almost history (this idea still makes sense for BuJo fans and people that want to put checkboxes in a table).

One tiny comment, however. I think the styling .md-checkbox .checkbox-wrapper { align-items: center; } is not optimal:

Centered
Centered698Ă—295 18.1 KB

I prefer:

Baseline
Baseline700Ă—292 16.2 KB

So I added .md-checkbox .checkbox-wrapper { align-items: baseline; } to my userstyle.css. May I suggest to make this setting the default?

[Off topic: I LOVE these arrows Arrows in 1.0.195!]

1 Like
2

This one is a "keeper". The layout is far better. +1 for default.

It may be off-topic but I was surprised this was not mentioned in the release notes. This has made editing between notes a LOT easier!

3

I’m sorry, but I see no difference in those 2 pictures whatsoever. They look exactly the same to me.

4

“Quis custodiet” check box

5

Ah, thanks. I just thought that the checkbox was set differently. I didn't see that the 2-4th line are one checkbox item....
Now it makes sense. :wink:

6

It looks indeed better. Feel free to create a pull request with this change and we can merge. You should only need to change noteStyle.js

7

Btw, the css does not work. I have to use li.md-checkbox .checkbox-wrapper

8

Possibly needs a little refining first. I have found that in Windows baseline sits the checkbox above the height of the text but flex-start puts it in line with the first line text.

.md-checkbox .checkbox-wrapper {
	align-items: flex-start;
}
9

In macOS I don’t see a difference between flex-start and baseline. Both are a bit above the height of the text.
And I have to add li. to the css, otherwise it doesn’t work at all. Very strange.

10

On that note, the resource item is too low. The following looks also much better:

.resource-icon { top: .4em !important; }

11

I think we should make the icons smaller too. I don't know about other apps but in Bear for example they look much smaller:

image

That looks better than what we have now in Joplin:

image

1 Like
12

Indeed. I don't need the li prefix, neither on the Mac nor on Win. But it doesn't do any harm.You could even reason that it is more consistent to add it.

And my alignments are:

  • flex-start -- a bit too high
  • stretch -- a bit too high
  • baseline -- perfect (or at least much better)

So all three of us (@dpoulton, @tessus, and me) get a different rendering, apparently. The images in my OP were from Windows.

Last insights: Chrome and Mozilla behave exactly the opposite, so baseline too high and flex-start better. I suspect the line-height and font settings being responsible for the different observations.

13

I'm on macOS. Strange, indeed.

14

:+1:

15

I just commented on the smaller icon over here before I saw this thread: Share your CSS. I ended up making mine much smaller as well:
little J

Also, FWIW, this worked for me on Mac, without the li

.md-checkbox .checkbox-wrapper {
    align-items: flex-start;
}
16

IMO this is a bit too small. It should be the same height as the tallest character.

1 Like