From 41006bf3fcaf88af20d6385607030dea6a57bd24 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Dec 2020 18:20:45 +0200
Subject: [PATCH] UI: Fixed show in Safari browser dashboard filter

---
 .../filter-user-info-dialog.component.html    |  6 +-
 .../filter/filters-edit-panel.component.html  |  4 +-
 .../filter/user-filter-dialog.component.html  | 58 +++++++++----------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 587504da45..9be0838fb8 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -27,10 +27,10 @@
   </mat-toolbar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" fxLayout="column">
-      <mat-checkbox fxFlex formControlName="editable" style="margin-bottom: 16px;">
+      <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
         <mat-form-field fxFlex class="mat-block">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
@@ -39,7 +39,7 @@
           {{ 'filter.autogenerated-label' | translate }}
         </mat-checkbox>
       </div>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-form-field class="mat-block">
         <mat-label translate>filter.order-priority</mat-label>
         <input matInput type="number" formControlName="order">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index 3de6b75bc4..775bfddaaa 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -16,8 +16,8 @@
 
 -->
 <div fxLayout="column" class="mat-content mat-padding">
-  <div fxLayout="column" *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+  <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
+    <div fxLayout="row" fxLayoutAlign="start center">
       <mat-label fxFlex>{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index bf38483244..e8b816a583 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -29,37 +29,33 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center"
-             formArrayName="userInputs"
-             *ngFor="let userInputControl of userInputsFormArray().controls; let $index = index">
-          <div fxFlex fxLayout="column"
-               [ngSwitch]="userInputControl.get('valueType').value">
-            <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
-              <mat-form-field fxFlex class="mat-block">
-                <mat-label>{{ userInputControl.get('label').value }}</mat-label>
-                <input matInput [formControl]="userInputControl.get('value')">
-              </mat-form-field>
-            </ng-template>
-            <ng-template [ngSwitchCase]="valueTypeEnum.NUMERIC">
-              <mat-form-field fxFlex class="mat-block">
-                <mat-label>{{ userInputControl.get('label').value }}</mat-label>
-                <input required type="number" matInput [formControl]="userInputControl.get('value')">
-              </mat-form-field>
-            </ng-template>
-            <ng-template [ngSwitchCase]="valueTypeEnum.DATE_TIME">
-              <label class="tb-title no-padding tb-required">{{ userInputControl.get('label').value }}</label>
-              <tb-datetime fxFlex [formControl]="userInputControl.get('value')"
-                           dateText="filter.date"
-                           timeText="filter.time"
-                           required [showLabel]="false"></tb-datetime>
-            </ng-template>
-            <ng-template [ngSwitchCase]="valueTypeEnum.BOOLEAN">
-              <mat-checkbox labelPosition="before" fxFlex [formControl]="userInputControl.get('value')">
-                {{ userInputControl.get('label').value }}
-              </mat-checkbox>
-            </ng-template>
-          </div>
+      <div formArrayName="userInputs"
+           *ngFor="let userInputControl of userInputsFormArray().controls; let $index = index">
+        <div [ngSwitch]="userInputControl.get('valueType').value">
+          <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
+            <mat-form-field class="mat-block">
+              <mat-label>{{ userInputControl.get('label').value }}</mat-label>
+              <input matInput [formControl]="userInputControl.get('value')">
+            </mat-form-field>
+          </ng-template>
+          <ng-template [ngSwitchCase]="valueTypeEnum.NUMERIC">
+            <mat-form-field class="mat-block">
+              <mat-label>{{ userInputControl.get('label').value }}</mat-label>
+              <input required type="number" matInput [formControl]="userInputControl.get('value')">
+            </mat-form-field>
+          </ng-template>
+          <ng-template [ngSwitchCase]="valueTypeEnum.DATE_TIME">
+            <label class="tb-title no-padding tb-required">{{ userInputControl.get('label').value }}</label>
+            <tb-datetime [formControl]="userInputControl.get('value')"
+                         dateText="filter.date"
+                         timeText="filter.time"
+                         required [showLabel]="false"></tb-datetime>
+          </ng-template>
+          <ng-template [ngSwitchCase]="valueTypeEnum.BOOLEAN">
+            <mat-checkbox labelPosition="before" [formControl]="userInputControl.get('value')">
+              {{ userInputControl.get('label').value }}
+            </mat-checkbox>
+          </ng-template>
         </div>
       </div>
     </fieldset>