Problem/Motivation

Webforms flex rules that define form-group bottom margin are wrong because flex is disabling margin collapsing. We should define the bottom margin on the parent webform-flexbox element and also reset the top margin for it.

CommentFileSizeAuthor
#8 interdiff-3125164-4-7.txt585 bytessasanikolic
#7 improve-webforms-flexbox-rules-3125164-7.patch2.29 KBsasanikolic
#6 webform.webform.form_in_flex_extended.yml5.36 KBsasanikolic
#5 webform.webform.form_in_flex.yml5.04 KBsasanikolic
#5 Two columns webform.png25.84 KBsasanikolic
#4 improve-webforms-flexbox-rules-3125164-4.patch2.39 KBpivica
#4 interdiff-3125164-3-4.txt1007 bytespivica
#3 improve-webforms-flexbox-rules-3125164-3.patch2.06 KBpivica
#3 interdiff-3125164-2-3.txt1.65 KBpivica
#2 improve-webforms-flexbox-rules-3125164-2.patch1.06 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
Status: Active » Needs review
Issue tags: +next-release
StatusFileSize
new improve-webforms-flexbox-rules-3125164-2.patch1.06 KB

Here is a patch.

pivica’s picture

pivica commented
StatusFileSize
new interdiff-3125164-2-3.txt1.65 KB
new improve-webforms-flexbox-rules-3125164-3.patch2.06 KB

Hmm, it seems we can additionally simplify stuff here now and just reset bottom margin to zero - doing a negative reset is not working properly any more.

Also when the label is hidden we need to align flex to bottom.

Here is a new patch.

pivica’s picture

pivica commented
StatusFileSize
new interdiff-3125164-3-4.txt1007 bytes
new improve-webforms-flexbox-rules-3125164-4.patch2.39 KB

Found couple of additional edge cases where margin collapsing was not working properly (fieldset and details), here is update.

sasanikolic’s picture

sasanikolic commented
Status: Needs review » Needs work
StatusFileSize
new Two columns webform.png25.84 KB
new webform.webform.form_in_flex.yml5.04 KB 
+++ b/themes/bs_bootstrap/sass/components/partials/_webform.scss
@@ -1,4 +1,16 @@
+    align-items: flex-end;

We can't do this by default. The issue is that with this we override the default "Top (flex-start)" alignment and then this setting becomes redundant.
This becomes visible when we have two not-equal columns.
Attaching a screenshot and an exported webform with the issue visible.

sasanikolic’s picture

sasanikolic commented
StatusFileSize
new webform.webform.form_in_flex_extended.yml5.36 KB

We did this to align the items in one row to the bottom. In that case we can use the Flex align "Bottom (flex-end)" webform flex setting. So, I think we should revert this default bottom alignment definition.

Attaching the same webform with the one row example.

sasanikolic’s picture

sasanikolic commented
Status: Needs work » Needs review
StatusFileSize
new improve-webforms-flexbox-rules-3125164-7.patch2.29 KB

Here is the proposed patch. What do you think @pivica? I know this would involve changing the webforms manually, but I really don't think we should alter the default webform flex behavior.

sasanikolic’s picture

sasanikolic commented
StatusFileSize
new interdiff-3125164-4-7.txt585 bytes

Forgot the interdiff.

pivica’s picture

pivica commented

Checked, tested changes and yes this make total sense, i've missed that webforms have 'Align items' options.

  • pivica committed 3d74a88 on 8.x-1.x 
    Issue #3125164 by pivica, sasanikolic: Improve webform flexbox vertical...
pivica’s picture

pivica commented
Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

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