AAE-35310 Displaying different text fields on an eform doesn't align vertically or horizontally (#10979)

* AAE-35310 fixing vertical or horizontal alignment issues * AAE-35310 refactoring code and removed manual scss with flexboxes
2025-07-24 17:32:15 +00:00 · 2025-07-02 17:33:37 +05:30
parent 6dafcb4447
commit d776c7c77d
23 changed files with 78 additions and 20 deletions
--- 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 {
--- 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%;
        }
    }
 }
--- 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 }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
        >
    </div>
-    <div>
+    <div class="adf-amount-widget-container">
        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
            @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
            <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
--- 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 {
--- 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 @@
 <div [ngClass]="field.className"
-     [class.adf-invalid]="!field.isValid && isTouched()">
+     [class.adf-invalid]="!field.isValid && isTouched()" class="adf-checkbox-widget-container"
+>
    <mat-checkbox [id]="field.id"
                  color="primary"
                  class="adf-checkbox"
@@ -8,7 +9,8 @@
                  [(ngModel)]="field.value"
                  (ngModelChange)="onFieldChanged(field)"
                  [title]="field.tooltip"
-                  (click)="markAsTouched()">
+                  (click)="markAsTouched()"
+                  >
        {{ field.name | translate }}
        <span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
    </mat-checkbox>
--- a/lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.scss
+++ 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;
+            }
+        }
+    }
+}
--- 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 {
--- 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 }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
        </label>
    </div>
-    <div>
+    <div class="adf-date-time-widget-container">
        <mat-form-field class="adf-date-time-widget adf-form-field-input"
                        [class.adf-left-label-input-datepicker]="field.leftLabels"
                        [floatLabel]="field.placeholder ? 'always' : null">
--- 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;
        }
--- 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 @@
-<div class="{{ field.className }}" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
+<div class="{{ field.className }} date-widget-container" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
    <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
        <mat-label class="adf-label"
                   [id]="field.id + '-label'"
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.scss
@@ -0,0 +1,9 @@
+.adf {
+    &-widget {
+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+    }
+}
--- a/lib/core/src/lib/form/components/widgets/date/date.widget.ts
+++ b/lib/core/src/lib/form/components/widgets/date/date.widget.ts
@@ -42,6 +42,7 @@ import { ReactiveFormWidget } from '../reactive-widget.interface';
        { provide: DateAdapter, useClass: AdfDateFnsAdapter }
    ],
    templateUrl: './date.widget.html',
+    styleUrl: './date.widget.scss',
    host: {
        '(click)': 'event($event)',
        '(blur)': 'event($event)',
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
@@ -8,7 +8,7 @@
        </label>
    </div>

-    <div>
+    <div class="adf-decimal-widget-container">
        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
           @if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
            <input matInput
--- a/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss
+++ b/lib/core/src/lib/form/components/widgets/decimal/decimal.component.scss
@@ -2,6 +2,12 @@
    &-decimal-widget {
        width: 100%;

+        &-container {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
        .adf-label {
            top: 20px;
        }
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -1,6 +1,9 @@
 .adf {
    &-multiline-text-widget {
        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;

        .adf-label {
            top: 20px;
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.html
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.html
@@ -8,7 +8,7 @@
            {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
        </label>
    </div>
-    <div>
+    <div class="adf-number-widget-container">
        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
            @if( (field.name || this.field?.required) && !field.leftLabels) {
            <mat-label class="adf-label" [attr.for]="field.id">
--- 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;
        }
--- 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 }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
        </label>
    </div>
-    <div>
+    <div class="adf-text-widget-container">
        <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
            @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
                {{ field.name | translate }}
--- 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;
+        }
    }
 }
--- 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 @@
            ></label
        >
    </div>
-    <div>
+    <div class="adf-date-widget-container">
        <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
            @if ( (field.name || field?.required) && !field.leftLabels) {
                <mat-label class="adf-label" [attr.for]="field.id">
--- 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 {
--- 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;
--- 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;