Problem/Motivation

Webform composite fields are now using fieldset. Fieldset by default will disable vertical collapsing on child elements. This is probably fine except (at least for now) in the case when webform composite hidden title is used. The result looks ugly because the last element in fieldset has a duplicate vertical margin now.

Additional checking of this revealed that:
1. We do not need webform.composite.css that is coming from a webform module. That rules are not good enough for our base theme.
2. It seems that we should not remove 'form-item' CSS class in form-element.html.twig because there are core and contrib JS code that depends on it.

Comments

pivica created an issue. See original summary.

pivica’s picture

Status: Active » Needs review
StatusFileSize
new2.75 KB

Here is a patch.

ytsurk’s picture

This also affects webform flexbox in nested flexbox layouts.

In webform.element.flexbox.css .form-item's margin is reset.

Dunno if it's worth to expand this patch, nested flexbox layouts are very custom.

pivica’s picture

> Dunno if it's worth to expand this patch, nested flexbox layouts are very custom.

No idea, didn't use a lot of webforms with flexbox so, for now, i don't have an exact picture of how we should support that.

If we are not sure about that part we can create a follow-up webforms flexbox and deal with this later when needed.

pivica’s picture

Issue tags: +next-point-release-merge

  • pivica committed d99e4cc on 8.x-1.x
    Issue #3029800 by pivica, ytsurk: Fix disabled vertical margin...
pivica’s picture

Status: Needs review » Fixed
Issue tags: -next-point-release-merge

Committed.

pivica’s picture

@ytsurk please create a follow-up issue if you find more room for improving this, thx.

Status: Fixed » Closed (fixed)

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

pivica’s picture

> Dunno if it's worth to expand this patch, nested flexbox layouts are very custom.

We stumble on this on more custom projects, created a follow-up #3045912: Webform element flexbox css resetting bottom margin is a problem.