Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
Follow-up from #3015379: Use a single field for all four questions
The list of checkboxes is very long.
Proposed resolution
This could be improved by using a flex display in columns or rows with wrapping so that the checkboxes are displayed more compactly on desktop and tablets, but still long on phones.
Remaining tasks
Discuss approaches and write a patch.
User interface changes
Adds a flex container styling to the widget.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | interdiff_8-9.txt | 861 bytes | ivavictoria |
| #9 | gender-improve-responsive-display-of-checkboxes-3034470-9.patch | 946 bytes | ivavictoria |
| #8 | interdiff_5-8.txt | 958 bytes | helenasue |
| #8 | gender-improve-responsive-display-of-checkboxes-3034470-8-7.patch | 970 bytes | helenasue |
| #6 | improved-display-of-checkboxes_after_patch-3034470-6.PNG | 6.52 KB | Akanksha92 |
Comments
Comment #2
govind.maloo commentedWe could use simple CSS hack here to fix the height and use x-scroll to scroll.
Comment #3
alexdmccabeTo be honest, "hack" isn't the most reassuring word here. I'm not great at front end development, but I think having it behave responsively instead of fixing the height would be a better option.
Comment #4
alexdmccabeComment #5
priyankanarsule commentedI have added CSS for checkboxes. Does it need anything else?
Comment #6
Akanksha92 commented@priyankanarsule the patch looks good. The patch applied to the module successfully. Please find the attached screenshot for the same.
Comment #7
helenasue commentedChecking this out at DrupalCon Seattle. :)
Comment #8
helenasue commentedI've added responsive support for this to make sure it looks good and is useable at all breakpoints.
Comment #9
ivavictoriaI'm updating the CSS to use a more general class. If the field gets a different name (for example, "field_test_gender" instead of "field_gender"), the old class would no longer work.
Comment #11
alexdmccabeLooks good to me! Merged and pushed as 7.x-2.1!