Problem/Motivation

We are not exact and consistent when applying vertical spacing for form elements in CSS rules.

CommentFileSizeAuthor
#7 improve-form-vertical-grid-layout-3130069-7.patch2.31 KBpivica
#7 improve-form-vertical-grid-layout-3130069-6-7-interdiff.txt1.18 KBpivica
#6 improve-form-vertical-grid-layout-3130069-6.patch2.28 KBsasanikolic
#6 improve-form-vertical-grid-layout-3130069-6-interdiff.txt666 bytessasanikolic
#4 improve-form-vertical-grid-layout-3130069-3.patch2.08 KBsasanikolic
#4 improve-form-vertical-grid-layout-3130069-3-interdiff.txt518 bytessasanikolic
#2 improve-form-vertical-grid-layout-3130069-2.patch2.07 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
StatusFileSize
new improve-form-vertical-grid-layout-3130069-2.patch2.07 KB

Here is a patch.

sasanikolic’s picture

sasanikolic commented 
+++ b/themes/bs_bootstrap/sass/components/partials/_forms.scss
@@ -27,6 +27,18 @@ label {
+        &.form-group .form-group:last-child {

This caused some mobile margin issues between elements inside a flexbox. We should probably use a sibling selector for the form groups there.

sasanikolic’s picture

sasanikolic commented
Status: Active » Needs review
StatusFileSize
new improve-form-vertical-grid-layout-3130069-3-interdiff.txt518 bytes
new improve-form-vertical-grid-layout-3130069-3.patch2.08 KB

Here is a patch with the proposed improvement.

pivica’s picture

pivica commented
Status: Needs review » Needs work

Looks good, can we please add some commentary explaining exactly why we added sibling selector there? I think the issue is not exactly for mobile here but the issue is that that selector is expecting sibling .form-group elements and webform flex is wrapping .form-group in flexbox wrappers which are messing this selector goal to only reset last .form-group margin-bottom. And then because this margin reset is applied for all form-group elements then you get the issue for mobile also.

sasanikolic’s picture

sasanikolic commented
Status: Needs work » Needs review
StatusFileSize
new improve-form-vertical-grid-layout-3130069-6-interdiff.txt666 bytes
new improve-form-vertical-grid-layout-3130069-6.patch2.28 KB

This patch adds the comment as suggested.

pivica’s picture

pivica commented
StatusFileSize
new improve-form-vertical-grid-layout-3130069-6-7-interdiff.txt1.18 KB
new improve-form-vertical-grid-layout-3130069-7.patch2.31 KB

Improved comments a bit more.

  • pivica committed 7b3ad56 on 8.x-1.x 
    Issue #3130069 by sasanikolic, pivica: Improve form vertical grid layout
pivica’s picture

pivica commented
Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

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