Webform radios -> display issues

Created on 23 July 2021, almost 3 years ago
Updated 26 April 2023, about 1 year ago

Problem/Motivation

Note: top is on Mac OS X/Chrome and bottom is on Mac OS X/Firefox (on larger screens). If I squish the Firefox window to smaller width -> the QEON radio button becomes visible.

Steps to reproduce

Install Webform module -> then add Element of type radios:

  area:
    '#type': radios
    '#title': Area
    '#options':
      1: AB/NWT
      2: AC
      3: BC/Y
      4: CSO
      5: QEON
      6: MB/SK/WO
    '#options_display': three_columns
    '#required': true

Documenting this here. Happy to provide more info and/or test possible patches. I'm seeing this on 9.1.x - I'll bump another site to 9.2.x to see if the issue is present there.

🐛 Bug report
Status

Needs work

Version

10.1

Component
Olivero 

Last updated about 5 hours ago

Created by

🇨🇦Canada KarinG 🇨🇦

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India pradipmodh13 Ahmedabad

    Hello, @kostyashupenko.
    You are correct. The gap between two radio buttons works great with a single column, however when we set two, three, or five columns, the spacing is removed by webform CSS.
    We can get our layout space and active radio button will not overlap by eliminating margin-bottom css.
    So we should edit webform CSS rather than the olivero theme file.
    Please see the following screenshot for reference.

    @all
    Please suggest me how can I submit the patch of webform contrib module. ?

  • First commit to issue fork.
Production build 0.69.0 2024