Merge pull request #4246 from atmire/w2p-127705_cleanup-input-form-spacing_contribute-main

Reduce margins on input fields

Author: tdonohue

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss

@@ -40,5 +40,9 @@
 .col-form-label {
   padding-top: 0;
   padding-bottom: 0;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+label {
+  margin-bottom: 0.25rem;
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html

@@ -7,10 +7,10 @@
       [formGroupName]="model.id"
       [ngClass]="model.layout.element?.control">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input"
+            <div  class="form-check">
+              <input type="checkbox" class="form-check-input"
                 [attr.aria-labelledby]="'label_' + model.id"
                 [attr.tabindex]="item.index"
                 [checked]="item.value"
@@ -21,7 +21,7 @@
                 (blur)="onBlur($event)"
                 (change)="onChange($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">
@@ -43,18 +43,18 @@
       [ngClass]="model.layout.element?.control"
       (change)="onChange($event)">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input"
+            <div  class="form-check">
+              <input type="radio" class="form-check-input"
                 [checked]="item.value"
                 [id]="item.id"
                 [name]="model.id"
                 [required]="model.required"
                 [value]="item.index"
                 (blur)="onBlur($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts

@@ -179,8 +179,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 })];
 
@@ -229,8 +229,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is deselected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [];
 
@@ -267,8 +267,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value when a radio option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-radio'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 });