Problem/Motivation

A single checkbox element inside a flexbox layout is visually broken.

Steps to reproduce

  1. Create a webform.
  2. Add a "layout" (flexbox container).
  3. Create a single checkbox field inside the flexbox container.
  4. Create any other kind of field inside the flexbox container.
  5. View the page at a viewport that is larger than 768px

The basic problem, is that the CSS that targets "inputs" should not target single checkbox inputs.

  /* from webform.element.flexbox.css */
  .webform-flex--container > .form-item > input,
  .webform-flex--container > .form-item > select {
    width: 100%;
  }

Proposed resolution

There might be a couple approaches to solve this.

Option 1: CSS

Look at ways to exclude checkboxes from the css rules that set widths in: webform.element.flexbox.css Eg

  .webform-flex--container > .form-item > input:not(.form-checkbox),
  .webform-flex--container > .form-item > select {
    width: 100%;
  }

/* There are several other CSS rules that would need fixing, as well */

Option 2: Change the DOM Structure

Because the CSS uses the direct descended selector, we can maybe add another div wrapper around the .form-item class for single checkboxes, to avoid a css rule match.

Remaining tasks

Discuss pros/cons.
Write patch.

User interface changes

Display/layout bug will be fixed.

API changes

If option 2 is selected, HTML Dom structure produced by Webforms would be modified. Option 1 would produce no API changes I think.

Data model changes

None.

CommentFileSizeAuthor
#5 3177855-5.patch2.54 KBjrockowitz
#3 Screen Shot 2020-10-20 at 11.30.41 AM.png25.85 KBjwilson3
#3 3177855-3.patch2.52 KBjwilson3
webform-flexbox-checkbox.gif129.8 KBjwilson3
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jwilson3 created an issue. See original summary.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Option 1 makes sense to me and should also be applied to 8.x-5.x.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
CreditAttribution: jwilson3 at Bluespark commented
Status: Active » Needs review
FileSize
3177855-3.patch2.52 KB
Screen Shot 2020-10-20 at 11.30.41 AM.png25.85 KB

Since there were several changes here related to prefix and suffix, I've tested visually what each one does in a flexbox layout, and I think this is probably the correct behavior.

Regarding this change:

-  .container-inline .webform-flex--container > .form-item > input,
+  .container-inline .webform-flex--container > .form-item > input:not(.form-checkbox),
   .container-inline .webform-flex--container > .form-item > select {
     width: inherit;
   }

This was really the only doubtful change, since this line is intended to UNSET the width from a previous rule, it could be argued that it isnt necessary, PLUS the question of whether a container inline is even possible with a single checkbox field — I doubt it, but anyway, I decided in favor of making the CSS rules consistent. You might have another take on this though which is fine.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Version: 6.x-dev » 8.x-5.x-dev

I think using input:not([type="checkbox"]) is a little more specific and works with themes that do not implement the .form-checkbox class. Also, I think the patch should be also be applied to 8.x-5.x and 6.x

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
3177855-5.patch2.54 KB

I think using input:not([type="checkbox"]) is a little more specific and works with themes that do not implement the .form-checkbox class. Also, I think the patch should be also be applied to 8.x-5.x and 6.x

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs review » Reviewed & tested by the community
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
CreditAttribution: jwilson3 at Bluespark commented

Totally makes sense. Duh.

  • jrockowitz authored a085593 on 8.x-5.x 
    Issue #3177855 by jwilson3, jrockowitz: Single checkbox field inside...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Reviewed & tested by the community » Fixed

  • jrockowitz authored a085593 on 6.x 
    Issue #3177855 by jwilson3, jrockowitz: Single checkbox field inside...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.