diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index 903c762f63..977426acf6 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/lib/core/src/lib/form/components/form-renderer.component.scss @@ -67,8 +67,6 @@ width: 100%; flex-grow: 1; box-sizing: border-box; - padding-left: 1%; - padding-right: 1%; } } @@ -76,6 +74,8 @@ display: flex; flex-direction: column; flex: 1 1 auto; + padding-right: 1%; + padding-left: 1%; } &-item { diff --git a/lib/core/src/lib/form/components/form-section/form-section.component.scss b/lib/core/src/lib/form/components/form-section/form-section.component.scss index 8181567b2a..59b2562c35 100644 --- a/lib/core/src/lib/form/components/form-section/form-section.component.scss +++ b/lib/core/src/lib/form/components/form-section/form-section.component.scss @@ -2,8 +2,9 @@ &-section { &-single-column { display: flex; - flex-wrap: wrap; - align-items: flex-start; + flex-wrap: inherit; + align-items: baseline; + gap: 1%; } &-column-view-item { @@ -11,8 +12,6 @@ display: flex; flex-grow: 1; box-sizing: border-box; - padding-left: 1%; - padding-right: 1%; } } } diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html index 4248c70681..12aba25f05 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.html +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.html @@ -9,7 +9,7 @@ >{{field.name | translate }}* -
+
@if ( (field.name || field?.required) && !field.leftLabels) { {{field.name | translate }} } {{ currency }}  diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss index 3a0e775ee7..938a242fae 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss @@ -4,11 +4,16 @@ .adf { &-amount-widget { width: 100%; - margin-top: 15px; .adf-left-label { line-height: 36px; } + + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } } &-amount-widget__input { diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html index 6f9c17fd4f..520cefbd4c 100644 --- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html +++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.html @@ -1,5 +1,6 @@
+ [class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container" +> + (click)="markAsTouched()" + > {{ field.name | translate }} * diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss new file mode 100644 index 0000000000..feea319457 --- /dev/null +++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss @@ -0,0 +1,11 @@ +.adf { + &-checkbox { + &-widget { + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } + } + } +} diff --git a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts index 78bc359cba..8a07bccd23 100644 --- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts +++ b/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.ts @@ -30,6 +30,7 @@ import { WidgetComponent } from '../widget.component'; selector: 'checkbox-widget', standalone: true, templateUrl: './checkbox.widget.html', + styleUrl: './checkbox.widget.scss', styles: [ ` .adf-checkbox { diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html index 9e616f5fe8..ec1c68d82b 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html @@ -7,7 +7,7 @@ {{ field.name | translate }} ({{ field.dateDisplayFormat }})*
-
+
diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss index d98c9ff174..67284b0088 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss @@ -3,6 +3,12 @@ .adf { &-date-time-widget { + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } + #{ms.$mat-form-field-suffix} { top: 26px; } diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html index 11115c3044..c3815b15e1 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.html +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html @@ -1,4 +1,4 @@ -
+
-
+
@if ( (field.name || field?.required) && !field.leftLabels) { {{ field.name | translate }} } *
-
+
@if( (field.name || this.field?.required) && !field.leftLabels) { diff --git a/lib/core/src/lib/form/components/widgets/number/number.widget.scss b/lib/core/src/lib/form/components/widgets/number/number.widget.scss index 59276a274e..f272f89e91 100644 --- a/lib/core/src/lib/form/components/widgets/number/number.widget.scss +++ b/lib/core/src/lib/form/components/widgets/number/number.widget.scss @@ -2,6 +2,12 @@ &-number-widget { width: 100%; + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } + .adf-label { top: 20px; } diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.html b/lib/core/src/lib/form/components/widgets/text/text.widget.html index 8ea1c81deb..4ff765d9d0 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.html +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.html @@ -7,7 +7,7 @@ {{ field.name | translate }}*
-
+
@if ( (field.name || this.field?.required) && !field.leftLabels) { {{ field.name | translate }} diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss index b8b622a419..2544387edf 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss @@ -8,5 +8,11 @@ #{ms.$mat-form-field-label} { top: 20px; } + + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index 5102a5f58a..8c8c243986 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -13,7 +13,7 @@ >
-
+
@if ( (field.name || field?.required) && !field.leftLabels) { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss index 63073c09de..39b34007b2 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss @@ -11,6 +11,12 @@ .adf-label { top: 20px; } + + &-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } } &-left-label-input-datepicker { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss index 1880db3e82..41a3bc0e5a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/display-rich-text/display-rich-text.widget.scss @@ -1,6 +1,4 @@ .adf-display-rich-text-widget { - padding: 10px; - pre { min-height: 100px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss index 162f81f2ab..a2a0b68b4d 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss @@ -9,7 +9,6 @@ } &-radio-button-container { - margin-bottom: 15px; display: flex; flex-direction: column; @@ -23,7 +22,7 @@ &-radio-button-container-horizontal { margin-bottom: 15px; display: flex; - flex-flow: row wrap; + flex-flow: column wrap; align-items: flex-start; justify-content: flex-start;