In #2675464: Margin on form-items in table rows (Classy) we identified and devised a solution for a problem in the Classy theme that causes problems for modules like IEF and Paragraphs. However, @lauriii suggested it was too dangerous to fix properly in Classy without trying first in Seven.
Problem
In /core/themes/classy/css/components/form.css we have:
tr.odd .form-item,
tr.even .form-item {
margin-top: 0;
margin-bottom: 0;
}
This works fine for single element forms (like checkboxes or selects) in table rows, but causes problems when we want to have more complex multi-element forms in tables (like anywhere in a standard node edit form when a field widget requires multiple form elements).
Furthermore, this may break break content list styles; see comment 47 in #2675464-47: Margin on form-items in table rows (Classy).
Solution
Add the margin back in, overriding Classy. Then remove it just for td > .form-item:only-child
.
Todo
Create a patchPost screenshots showing before/after in a complex form like paragraphs- Post screenshots showing before/after in the content list
Tag for Needs frontend framework manager review- Copy issue credit across from #2675464: Margin on form-items in table rows (Classy)
Screenshots
Before:
After: