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

Reduce margins on input fields
This commit is contained in:
Tim Donohue
2025-05-02 14:51:04 -05:00
committed by GitHub
3 changed files with 19 additions and 15 deletions

View File

@@ -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;
}

View File

@@ -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,10 +43,10 @@
[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"
@@ -54,7 +54,7 @@
[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">

View File

@@ -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 });