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
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.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | fix-webform-vertical-margin-collapsing-3029800-2.patch | 2.75 KB | pivica |
Comments
Comment #2
pivica commentedHere is a patch.
Comment #3
ytsurkThis 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.
Comment #4
pivica commented> 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.
Comment #5
pivica commentedComment #7
pivica commentedCommitted.
Comment #8
pivica commented@ytsurk please create a follow-up issue if you find more room for improving this, thx.
Comment #10
pivica commented> 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.