Skip to content

Reduce margins on input fields #4246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tdonohue merged 2 commits into from
May 2, 2025
Merged

Reduce margins on input fields #4246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b00f489
127705: Reduce margins on input fields
Apr 25, 2025
46a8953
127705: Update dynamic list to bootstrap 5
May 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion ...p/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
16 changes: 8 additions & 8 deletions src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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">
Expand All @@ -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">
Expand Down
12 changes: 6 additions & 6 deletions src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 })];

Expand Down Expand Up @@ -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 = [];

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

Expand Down
Loading