magp18
February 7, 2024, 10:41am
1
Hi,
We noticed that bullet points are disabled at css level, is this intended?
I guess this is getting set in the reset.css
file . Looking at the blame for that line, it seems like it has pretty much always been this way (though we do use list-style: inside
for Enketo Questions ). Not sure about the exact motivations for setting things up like this. Are you running into a particular issue with this CSS?
magp18
February 8, 2024, 7:30am
3
No not really issue. We just would like to have bullet points displayed and didn’t know why it wasn’t working until we found this line. As a work around we are using hyphens but bullet points could improve the appearance of the form
Ah, so if you are specifically just trying to get bullet points in form labels, you are probably hitting this bug :
opened 04:11PM - 23 Dec 22 UTC
closed 05:31AM - 20 Dec 23 UTC
Type: Bug
Enketo
Affects: 4.0.0
Affects: 4.1.0
Affects: 4.1.1
Affects: 4.2.0
Affects: 4.0.1
Affects: 4.1.2
Affects: 4.2.1
Affects: 4.2.2
Affects: 4.3.0
Affects: 4.4.0
Affects: 4.2.4
Affects: 4.3.2
Affects: 4.4.1
Affects: 4.2.3
Affects: 4.3.1
Affects: 4.5.0
Affects: 4.5.1
Affects: 4.4.2
**Describe the bug**
In `3.x` versions of the CHT you could _simulate_ a bullet… ed list in a form label (e.g. a `note`) by using `-` or `*`. Now, in `4.x`, after https://github.com/medic/cht-core/issues/6345, the bullets are no longer properly displayed in the label.
**To Reproduce**
Steps to reproduce the behavior:
1. Create a form with a note that has this label:
```
Do these bullets work:
- Hello
- World
Or do these work:
– Hello
– World
How about these:
* Hello
* World
```
2. Open the form and view the note
**Expected behavior**
On `3.x`, the note looks like this:
![image](https://user-images.githubusercontent.com/8441903/209364499-65c8f4cd-a0af-427f-986c-bd4b397d1539.png)
**Actual behavior**
On `4.x`, though, it looks like this:
![image](https://user-images.githubusercontent.com/8441903/209364595-8b73b480-e939-4a87-a08f-25ef3e0c6894.png)
_(Note that the middle block "works" because the `–` character is not valid markdown syntax for a bullet point....)_
**Additional context**
The problem is that in `3.x` the [markdown processing](https://github.com/medic/cht-core/blob/3.17.x/webapp/src/ts/services/markdown.service.ts) was basic and did not support bullet points. So, these notes were evaluated as simple text and the bullet characters are preserved in the text.
On `4.x`, the [markdown processing](https://github.com/medic/cht-core/blob/69a0207d8c67e92ba625f9545e01c4c781779246/api/src/enketo-transformer/markdown.js#L65) is more advanced and can detect the bullet points in the question labels. It then converts the bullets to unordered lists (`<ul>`). The problem is that the CSS style that ends up getting computed for those unordered lists is `list-style: none`. So, the end result is that the unordered lists are displayed in the labels without any bullet points.
I think we probably just need to tweak the CSS for these unordered lists to be `list-style: inside;`
_(This change was first noted by @binokaryg (and team) when upgrading a project's config to work with CHT `4.x`.)_
1 Like
magp18
February 9, 2024, 7:30am
5
Yes that’s exactly it! Seems that it will come with 4.6? That’s great!
1 Like
Should be landing with 4.6
in a few days! (Though, it is classified as a bug, so if there was a need, we could also probably get it pushed back into the 4.5.x
and/or 4.4.x
releases…)
1 Like