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.

Sign up for GitHub

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

Jump to bottom

Options with long names look wrong in enketo selects #8541

Closed
garethbowen opened this issue Sep 13, 2023 · 0 comments
Closed

Options with long names look wrong in enketo selects #8541

garethbowen opened this issue Sep 13, 2023 · 0 comments
Assignees
@latin-panda
Labels
Enketo Affects Enketo forms Priority: 3 - Low Can be bumped from the release Type: Bug Fix something that isn't working as intended UI/UX Site design and usability improvements.
Milestone
4.5.0

Comments

@garethbowen
Copy link
Member

garethbowen commented Sep 13, 2023 •
edited

Describe the bug

Enketo forms with options have strange padding instead of wrapping as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Set up an enketo form with a dropdown select with an option of "ELGEYO/MARAKWET"
  2. Render the form and view the option
  3. See error

image

Expected behavior

image

Environment

  • Instance:
  • Browser:
  • Client platform:
  • App: webapp
  • Version: 4.0.0+

Additional context

It may be possible to fix this with more aggressive line break, and we should consider making it wider be default.

The whitespace code is here:

cht-core/webapp/src/css/enketo/medic.less

Line 23 in 1251fd0

white-space: normal;

This was mentioned on the forum: https://forum.communityhealthtoolkit.org/t/spacing-bug-on-select-questions-with-appearance-minimal/3026
@garethbowen garethbowen added Type: Bug Fix something that isn't working as intended UI/UX Site design and usability improvements. Enketo Affects Enketo forms Priority: 3 - Low Can be bumped from the release labels Sep 13, 2023
@latin-panda latin-panda added this to the 4.5.0 milestone Sep 20, 2023
@latin-panda latin-panda mentioned this issue Sep 20, 2023
Merged
5 tasks
latin-panda added a commit that referenced this issue Oct 26, 2023
@latin-panda
fix(#8541): fixes display of Enketo select option (#8565)
a2d0cca 
Fixes display for:
- Long and shot words
- Long and short sentences
Benmuiruri pushed a commit that referenced this issue Oct 26, 2023
@latin-panda @Benmuiruri
fix(#8541): fixes display of Enketo select option (#8565)
9e318d1 
Fixes display for:
- Long and shot words
- Long and short sentences
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@latin-panda latin-panda

Labels
Enketo Affects Enketo forms Priority: 3 - Low Can be bumped from the release Type: Bug Fix something that isn't working as intended UI/UX Site design and usability improvements.
Projects
Product Team Activities
Status: Done
Milestone
4.5.0
Development

No branches or pull requests
2 participants
@garethbowen @latin-panda