From 93fb9754ef6f2222878bb766b31adf8f2e39eaa1 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 14 Dec 2022 13:14:58 +0200
Subject: [PATCH] UI: Always visible action button in multiple input widgets

---
 .../lib/multiple-input-widget.component.html  | 28 +++++++++----------
 .../lib/multiple-input-widget.component.scss  | 11 ++++++--
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 550f7cde49..93453521c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -19,7 +19,7 @@
       [formGroup]="multipleInputFormGroup"
       tb-toast toastTarget="{{ toastTargetId }}"
       (ngSubmit)="saveForm()" novalidate autocomplete="off">
-  <div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid">
+  <div class="tb-multiple-input-container" *ngIf="entityDetected && isAllParametersValid">
     <fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
       <legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
       </legend>
@@ -142,19 +142,19 @@
         </div>
       </div>
     </fieldset>
-    <div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
-         *ngIf="entityDetected && settings.showActionButtons">
-      <button mat-button color="primary" type="button"
-              (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
-              [disabled]="!multipleInputFormGroup.dirty">
-        {{ resetButtonLabel }}
-      </button>
-      <button mat-button mat-raised-button color="primary" type="submit"
-                 style="max-height: 50px; margin-right:20px;"
-                 [disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
-        {{ saveButtonLabel }}
-      </button>
-    </div>
+  </div>
+  <div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
+       *ngIf="entityDetected && isAllParametersValid && settings.showActionButtons">
+    <button mat-button color="primary" type="button"
+            (click)="discardAll()" style="max-height: 50px; margin-right:20px;"
+            [disabled]="!multipleInputFormGroup.dirty">
+      {{ resetButtonLabel }}
+    </button>
+    <button mat-button mat-raised-button color="primary" type="submit"
+            style="max-height: 50px; margin-right:20px;"
+            [disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
+      {{ saveButtonLabel }}
+    </button>
   </div>
   <div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
        *ngIf="(!entityDetected || !isAllParametersValid) && datasourceDetected">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
index 37e8d5ad8b..f99671bed5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
@@ -17,8 +17,15 @@
 
   .tb-multiple-input {
     height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+
+    .tb-multiple-input-container {
+      padding: 0 8px;
+      flex: 1 1 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
 
     .fields-group {
       padding: 0 8px;