Problem

Let's say we have a 2 column content layout on the page with a sidebar and the webform in the content area and let's say we have a 3 column layout option selected on a checkboxes form element.

On smaller desktops, we are experiencing some overlap of the 3 columns layout with the sidebar.

Proposed solution

Change .webform-options-display-three-columns { display: inline-block } to display: block.

This may have some side effects, like forcing the elements to be displayed in 3 columns layout on larger screens - that looks better to me in this case (see the screenshots attached), but probably won't look that good when there is no sidebar.

Maybe also reconsider using the columns-count in this case because of strange wrapping? See the number of elements in each column on smaller screens (2, 1, 3 in this case).

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sasanikolic created an issue. See original summary.

sasanikolic’s picture

Status: Active » Needs review
FileSize
612 bytes

Here is the patch with the proposed solution.

sasanikolic’s picture

Issue summary: View changes
jrockowitz’s picture

Attached is a webform which can be used to test this change.

I am concerned about changing how multi-column radios and checkboxes look. It is possible to add the below CSS snippet to the webform module's global CSS (/admin/structure/webform/config/libraries)

.webform-options-display-two-columns {
    display: block;
}

.webform-options-display-three-columns {
    display: block;
}
Berdir’s picture

We can include that in our theme if you'd prefer to not changeit, I was wondering how you think about changing that. We did want to propose the change, others might have the same problem as well on their sites. Maybe keep it open for now in case someone else has a problem in the future? Up to you, I don't know enough about CSS to say what the "right" version is and it might vary on how a design is implemented?

jrockowitz’s picture

I like the change because the columns widths become more consistent. I am concerned that two columns radios/checkboxes would become too spread out on large screens.

A compromise would also be to set a max-width. The attached patch includes a max-width of 800px, which is very wide and allows for some pretty wide columns.

BTW, maybe we do need to make this change because it prevents multi-column radios and checkboxes from looking "broken."

Finally, maybe this change needs to be made to only 6.x.

sasanikolic’s picture

Yeah, I just wanted to propose something in this direction using max-width. If you'd like to stick with inline-block definition, already a max-width: 100% helps with wrapping of the checkboxes to its parent width. Not sure about hardcoding it to 800px, feels hacky.
The only issue left then would be with long words that don't wrap, we should break them using word-break but I'd also be fine moving on without that for now.

jrockowitz’s picture

The 800px is not really hacky because it is trying to make the multiple columns respond better on large screen widths. I think switching to display from inline-block to block is also a better approach.

sasanikolic’s picture

I also think it makes sense to change the display to block, as that makes the columns same width. Do we have the 800px width limit anywhere else? If you're happy with that solution, I'm confirming it works as expected.

jrockowitz’s picture

I am open to suggestions for the max-width. I felt an 800px max-width accounts for two and three column checkboxes/radios layout. Maybe 900px would better account for full screen width webforms.

Keep in mind anyone can easily override the default max-width.

jrockowitz’s picture

I am leaning toward the 900px max-width.

  • sasanikolic authored e6225a4 on 8.x-5.x
    Issue #3159008 by sasanikolic, jrockowitz: Columns layout overflow...
jrockowitz’s picture

Status: Needs review » Fixed

  • sasanikolic authored e6225a4 on 6.x
    Issue #3159008 by sasanikolic, jrockowitz: Columns layout overflow...

Status: Fixed » Closed (fixed)

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