Merge branch 'w2p-127705_cleanup-input-form-spacing' into w2p-127705_cleanup-input-form-spacing_contribute-main

This commit is contained in:
Joran De Braekeleer
2025-04-07 13:32:18 +02:00
4 changed files with 18 additions and 7 deletions

View File

@@ -1,5 +1,5 @@
<div [class.mb-3]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-3')" <div [class.mb-2]="hasLabel || model.type === 'DATE' || (model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-2')"
[class.d-none]="model.hidden" [class.d-none]="model.hidden"
[formGroup]="group" [formGroup]="group"
[ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]"> [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
@if (!isCheckbox && hasLabel) { @if (!isCheckbox && hasLabel) {
@@ -24,8 +24,7 @@
class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small> class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
} }
<!-- In case of repeatable fields show empty space for all elements except the first --> <!-- In case of repeatable fields show empty space for all elements except the first -->
@if (context?.index !== null @if (context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)) {
&& (!showErrorMessages || errorMessages.length === 0)) {
<div class="clearfix w-100 mb-2"></div> <div class="clearfix w-100 mb-2"></div>
} }
@@ -99,7 +98,9 @@
<small <small
class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small> class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
} }
<div class="clearfix w-100 mb-2"></div> @if (context?.parent?.groups?.length > 1 && (!showErrorMessages || errorMessages.length === 0)) {
<div class="clearfix w-100 mb-2"></div>
}
} }
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

View File

@@ -15,7 +15,6 @@
appearance: none; appearance: none;
} }
:host ::ng-deep .btn-group-toggle > .btn input[type="radio"] { :host ::ng-deep .btn-group-toggle > .btn input[type="radio"] {
position: absolute; position: absolute;
clip: rect(0,0,0,0); clip: rect(0,0,0,0);
@@ -33,3 +32,13 @@
:host ::ng-deep .custom-control-input.is-invalid ~ .custom-control-label { :host ::ng-deep .custom-control-input.is-invalid ~ .custom-control-label {
color: var(--bs-form-invalid-color); color: var(--bs-form-invalid-color);
} }
.invalid-feedback {
margin-top: 0;
}
.col-form-label {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0.5rem;
}

View File

@@ -1,5 +1,5 @@
<div class="d-flex"> <div class="d-flex">
<span class="me-auto text-contents"> <span class="me-auto text-contents align-self-center">
@if ((metadataRepresentation$ | async) === undefined) { @if ((metadataRepresentation$ | async) === undefined) {
<ds-loading [showMessage]="false"></ds-loading> <ds-loading [showMessage]="false"></ds-loading>
} }

View File

@@ -4,6 +4,7 @@
legend { legend {
font-size: initial; font-size: initial;
margin-bottom: 0;
/* Changed from Bootstrap 5's legend to ensure that the date issues label is on a different line as it's input */ /* Changed from Bootstrap 5's legend to ensure that the date issues label is on a different line as it's input */
float: none; float: none;