Checked Checkbox is too big

[deeconwastaken]

Describe the bug
The icon for a checked checkbox looks not good

To Reproduce
Steps to reproduce the behavior:

• make a list with checkboxes

[ ] Butter
[ ] 2 Kästen Mineralwasser

• click a checkbox

[x] Butter
[ ] 2 Kästen Mineralwasser

Expected behavior
The checkbox should look good

Screenshots

Server (please complete the following information):

• Notes app version: 3.0.3
• Nextcloud version: 17.0.1
• OS: Debian
• Web server: Apache
• PHP version: 7.2
• Database: mySQL

Client (please complete the following information):

• Browser (incl. version): Chrome 78.0.3904.97 and Microsoft Edge 44.18362.449.0
• OS: Windows 10 v1909

[korelstar]

Was this issue introduced with updating to Windows 10 1909? Do you know if it also occurred on 1903?

My virtual machine is still on 1903 (no update available) and there, it looks fine (with both Chrome 78.0.3904.108 and Edge):

[korelstar]

I finally got Windows 10 1909 on a computer. But here, with Microsoft Edge 44.18362.449.0, it looks exactly as intended (see my screenshot above).

Maybe the errornous design at your computer is caused by a third-party software? Do you have the ability to test with another computer?

[Larsene]

same problem here (same apparence on Opera / Win 10 2004)

[stefan-niedermann]

Can @Larsene or @deeconwastaken Press "F12" and inspect one of the checkbox elements? A screenshot of the right side of the developer panel, especially the "computed" section would be very interesting...

[deeconwastaken]

Hello @stefan-niedermann,

just write if you need more infos.

[stefan-niedermann]

It seems, that on the ::before-element, there is no explicit set width nor height. Therefore, it inherits those parameters from the parent, which would explain the calculated width to be 479.6px.

Maybe explicitely setting those properties might help?

Unfortunately i am only running linux machines, therefore i can not test and verify this.

[stefan-niedermann]

@deeconwastaken if you know how to use the developer tools: could you set in the "Styles" tab next to "Computed" at the ::before-Element explicitely the width and height for testing purposes? It should roughly look like this:

[Larsene]

@stefan-niedermann : it won't change anything. The size of the checked box is defined by the font-size property, and with the same font size, the boxes does'nt have the same rendered sizes...

But if you tweaks it here, it (almost) works. But need to be tested on other operating systems :

[korelstar]

@Larsene Thanks for your investigation. However, adjusting the font-size to 1.1em breaks the checkbox size on other systems:

I did some research on this. It looks that Nextcloud 17 switched from an explicit "Nextcloud font" (which was Nunito before) to platform dependent native fonts. This means, that Nextcloud now can look completely different on different operating systems. I'm wondering about this, but it's intended: nextcloud/server#16055.

.	Nextcloud 15	Nextcloud 18 beta 3
Windows 10 1909
Debian 10 with Gnome

The problem is, that the font used under Windows 10 1909 has a different size for unchecked vs. checked checkboxes (Unicode character 2610 vs. 2611, see screenshot above). Currently, I don't have any idea how to fix this. I would say it's a bug in that Windows font.

Do you have any ideas on this @jancborchardt ?

[Larsene]

@korelstar : you're totally right. This is not the solution (as it goes again the Nextcloud policy to be based on system font), but for users affected, you can explicitely change the font used to display the checkbox in the CustomCSS app :

.CodeMirror .cm-formatting-task.cm-meta::before, .CodeMirror .cm-formatting-task.cm-property::before {
    font-family: arial;
}

[korelstar]

Thanks, I think it's a good approach to fix the checkbox design. I found out that the tasks app recently switched to a common Nextcloud checkbox icon: nextcloud/tasks#506
Let's adopt this! :-)