From ac9c3731f8f7ca7924eeeaf18f30c5a48ea79ea3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 3 Jun 2020 11:36:20 +0300
Subject: [PATCH] Fixed problem widget-editor in Safari #2900

---
 ui/src/app/widget/widget-editor.scss     |  5 +++++
 ui/src/app/widget/widget-editor.tpl.html | 22 ++++++++++------------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui/src/app/widget/widget-editor.scss b/ui/src/app/widget/widget-editor.scss
index 55c69ca13c..9cd804803d 100644
--- a/ui/src/app/widget/widget-editor.scss
+++ b/ui/src/app/widget/widget-editor.scss
@@ -62,6 +62,11 @@ $edit-toolbar-height: 40px !default;
       height: 100%;
     }
   }
+
+  .container{
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .tb-split-vertical {
diff --git a/ui/src/app/widget/widget-editor.tpl.html b/ui/src/app/widget/widget-editor.tpl.html
index 8c6662e81b..7e532504f2 100644
--- a/ui/src/app/widget/widget-editor.tpl.html
+++ b/ui/src/app/widget/widget-editor.tpl.html
@@ -114,18 +114,18 @@
             </div>
         </md-toolbar>
         <div flex style="position: relative;">
-            <div class="tb-editor tb-absolute-fill" style="">
+            <div class="tb-editor tb-absolute-fill">
                 <div id="top_panel" class="tb-split tb-split-vertical">
                     <div id="top_left_panel" class="tb-split tb-content">
-                        <md-tabs md-selected="1" md-dynamic-height md-border-bottom style="width: 100%; height: 100%;">
-                            <md-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
+                        <md-tabs md-selected="1" md-dynamic-height md-border-bottom class="container">
+                            <md-tab label="{{ 'widget.resources' | translate }}">
                                 <div class="tb-resize-container" style="background-color: #fff;">
                                     <div class="md-padding">
                                         <div flex layout="row"
                                              ng-repeat="resource in vm.widget.resources track by $index"
                                              style="max-height: 40px;" layout-align="start center">
                                             <md-input-container flex md-no-float class="md-block"
-                                                                style="margin: 10px 0px 0px 0px; max-height: 40px;">
+                                                                style="margin: 10px 0 0; max-height: 40px;">
                                                 <input placeholder="{{ 'widget.resource-url' | translate }}"
                                                        ng-required="true" name="resource" ng-model="resource.url">
                                             </md-input-container>
@@ -154,7 +154,7 @@
                                     </div>
                                 </div>
                             </md-tab>
-                            <md-tab label="{{ 'widget.html' | translate }}" style="width: 100%; height: 100%;">
+                            <md-tab label="{{ 'widget.html' | translate }}">
                                 <div class="tb-resize-container" tb-expand-fullscreen expand-button-id="expand-button">
                                     <div class="tb-editor-area-title-panel">
                                         <md-button aria-label="{{ 'widget.tidy' | translate }}"
@@ -168,7 +168,7 @@
                                          ng-model="vm.widget.templateHtml"></div>
                                 </div>
                             </md-tab>
-                            <md-tab label="{{ 'widget.css' | translate }}" style="width: 100%; height: 100%;">
+                            <md-tab label="{{ 'widget.css' | translate }}">
                                 <div class="tb-resize-container" tb-expand-fullscreen expand-button-id="expand-button">
                                     <div class="tb-editor-area-title-panel">
                                         <md-button aria-label="{{ 'widget.tidy' | translate }}"
@@ -185,9 +185,8 @@
                         </md-tabs>
                     </div>
                     <div id="top_right_panel" class="tb-split tb-content">
-                        <md-tabs md-dynamic-height md-border-bottom style="width: 100%; height: 100%;">
-                            <md-tab label="{{ 'widget.settings-schema' | translate }}"
-                                    style="width: 100%; height: 100%;">
+                        <md-tabs md-dynamic-height md-border-bottom class="container">
+                            <md-tab label="{{ 'widget.settings-schema' | translate }}">
                                 <div class="tb-resize-container" tb-expand-fullscreen expand-button-id="expand-button">
                                     <div class="tb-editor-area-title-panel">
                                         <md-button aria-label="{{ 'widget.tidy' | translate }}"
@@ -201,8 +200,7 @@
                                          ng-model="vm.widget.settingsSchema"></div>
                                 </div>
                             </md-tab>
-                            <md-tab label="{{ 'widget.datakey-settings-schema' | translate }}"
-                                    style="width: 100%; height: 100%;">
+                            <md-tab label="{{ 'widget.datakey-settings-schema' | translate }}">
                                 <div class="tb-resize-container" tb-expand-fullscreen expand-button-id="expand-button">
                                     <div class="tb-editor-area-title-panel">
                                         <md-button aria-label="{{ 'widget.tidy' | translate }}"
@@ -240,7 +238,7 @@
                             <md-progress-circular ng-disabled="vm.iframeWidgetEditModeInited" md-mode="indeterminate" class="md-warn"
                                                   md-diameter="100"></md-progress-circular>
                         </md-content>
-                        <div tb-expand-fullscreen expand-button-id="expand-button" style="width: 100%; height: 100%;">
+                        <div tb-expand-fullscreen expand-button-id="expand-button" class="container">
                             <iframe frameborder="0" height="100%" width="100%"></iframe>
                             <md-button id="expand-button" aria-label="Fullscreen"
                                        class="md-icon-button tb-fullscreen-button-style"