Checklist interferes with bullets

UX
1

When I have a bulleted list which includes checkboxes, the bullets fail to render. I’m not sure if this is a feature or a bug. It is a bit tricky to control, that is for sure.

1. [] normal numbered item with checkbox
   - normal bullet
    - [] example bulleted checkbox
[] example bulleted item 2
- [] example bulleted item 3
   - [] example bulleted item 4
         - [] example bulleted item 5

gives:

  1. normal numbered item with checkbox
    • normal bullet
    • example bulleted checkbox
      example bulleted item 2
  • example bulleted item 3
    • example bulleted item 4
      - example bulleted item 5
1 Like
2

Its a feature but maybe it can be refined some. I can see css for .has-checkbox it is deliberately omitted due to visual noise.

6 Likes
3

I just tried around with the correct number of prefixed spaces.
Of course the bullet points are still missing, but it looks pretty nice now!

1. [] normal numbered item with checkbox A (0 spaces prefix)
    - normal bullet A.1 (4 spaces prefix)
      - [] example bulleted checkbox A.1 (4 + 2 = 6 spaces prefix)
    - normal bullet A.2 (4 spaces prefix)
      - [] example bulleted checkbox A.2 (4 + 2 = 6 spaces prefix)

Note: added newline here between lists of different types

- [] example bulleted item B (0 spaces prefix)
  - [] example bulleted item B.1 (2 spaces prefix)
    - [] example bulleted item B.1.1 (2 + 2 = 4 spaces prefix)
      - [] example bulleted item B.1.1.1 (2 + 2 + 2 = 6 spaces prefix)
      - [] example bulleted item B.1.1.2 (2 + 2 + 2 = 6 spaces prefix)
    - [] example bulleted item B.1.2 (2 + 2 = 4 spaces prefix)
  - [] example bulleted item B.2 (2 spaces prefix)
    - [] example bulleted item B.2.1 (2 + 2 = 4 spaces prefix)
    - [] example bulleted item B.2.2 (2 + 2 = 4 spaces prefix)
  1. normal numbered item with checkbox A
    • normal bullet A.1
      • example bulleted checkbox A.1
    • normal bullet A.2
      • example bulleted checkbox A.2
  • example bulleted item B
    • example bulleted item B.1
      • example bulleted item B.1.1
        • example bulleted item B.1.1.1
        • example bulleted item B.1.1.2
      • example bulleted item B.1.2
    • example bulleted item B.2
      • example bulleted item B.2.1
      • example bulleted item B.2.2
3 Likes
4

How does one get a bullet AND a checkbox? You get that with numbers, but I want it with bullets.

1. []
   1. []
   - []

Suggestion

I’d love a [] to be presented in lists as:

  1. as a bullet replacement if used without a bullet denoter
1.
 []
  1. as a bullet + a checkbox if used with a bullet denoter
1.
 - []

i.e. bullets are treated the same as numbers

5

Really high indentation?

  • List
    - Test
    • Test
    • Test
  • Test
- List
      - [] Test
    - [] Test
  - [] Test
- [] Test

It doesn’t bullet this way, but it does leave behind the dash that looks almost like a bullet.

Actually, here’s a real work-around:

  • List
    • ​ Item A
      • ​ Item A.1
        • ​ Item A.1.1
          • ​ Item A.1.1.1
    • ​ Item B

Any ␆ in this example should be replaced with a zero-width space

- List
  - ␆[] Item A
    - ␆[] Item A.1
      - ␆[] Item A.1.1
        - ␆[] Item A.1.1.1
  - ␆[] Item B

Zero width space to copy for testing:

​
3 Likes
6

@Firepup650 Nice find! Any character added in front of the checkbox will make the bullet points visible.

  • List
    • . Dot
      • ' Single quote (like in Excel text without formatting)
        • | Pipe

For a general solution: add this custom CSS to your Discourse instance.

ul li.has-checkbox .list-item-checkbox {
  position: relative;
  left: 0;
}

.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
  position: relative;
  list-style-type: disc;
}

.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
  list-style-type: circle;
}

.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
  list-style-type: square;
}
2 Likes
7

That is one solution, and works. But honestly… it gives me headache because it gives strong flasback how Excel forces to mark text cells :rofl:

8

So let’s make this a feature request:

Feature: add special notation to keep bullet points in checkbox-lists

If there is a list of checkboxes right now the list is shown without bullet points.

- [] point 1
  - [] point 2
    - [] point 3
      - [] point 4
  • point 1
    • point 2
      • point 3
        • point 4

Adding a single quote (e.g. Excel text without formatting) in front of the checkbox is already disabling this feature and bullet points are visible, but additionally the single quote should be removed.

- '[] point 1
  - '[] point 2
    - '[] point 3
      - '[] point 4
  • ' point 1
    • ' point 2
      • ' point 3
        • ' point 4
<!---
This markdown code:
-->

- '[] point

<!-- should become HTML:  (note: no single quote visible) -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>

<!-- instead of this HTML: (note: single quote still visible) -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>
2 Likes
9

A simpler fix / tidy up for this could be that a 2nd space (as in a normal space, not a zero pt space) can indicate that it should display both the bullet and the checkbox.

Of course, that might be a right headache to code!