Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bullets not displaying properly in form labels #8002

Closed
jkuester opened this issue Dec 23, 2022 · 1 comment · Fixed by #8767
Closed

Bullets not displaying properly in form labels #8002

jkuester opened this issue Dec 23, 2022 · 1 comment · Fixed by #8767

Comments

@jkuester
Copy link
Contributor

jkuester commented Dec 23, 2022

Describe the bug
In 3.x versions of the CHT you could simulate a bulleted list in a form label (e.g. a note) by using - or *. Now, in 4.x, after #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
  1. Open the form and view the note

Expected behavior
On 3.x, the note looks like this:

image

Actual behavior
On 4.x, though, it looks like this:

image

(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 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 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.)

@latin-panda
Copy link
Contributor

As mentioned in this ticket description, the dash and asterisk characters were replaced with a ul li elements.

The best I can do is style the ul li to look like bullet points:

@latin-panda latin-panda added this to the 4.6.0 milestone Dec 19, 2023
@latin-panda latin-panda linked a pull request Dec 19, 2023 that will close this issue
5 tasks
@michaelkohn michaelkohn moved this from In Progress to Done in Product Team Activities Dec 20, 2023
@michaelkohn michaelkohn moved this from Done to In Progress in Product Team Activities Dec 20, 2023
@github-project-automation github-project-automation bot moved this from In Progress to Done in Product Team Activities Dec 20, 2023
@jkuester jkuester added UI/UX Site design and usability improvements. and removed UI/UX Site design and usability improvements. labels Mar 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment