From 67f63e2bc0bf51c2d428438dce92cfe62cc306b6 Mon Sep 17 00:00:00 2001
From: Mikael Svenson <miksvenson@gmail.com>
Date: Wed, 16 Jan 2019 08:52:07 +0100
Subject: [PATCH] #756 Fix for DOM removing the padding in the zone.

---
 .../config/package-solution.json              |  2 +-
 .../scriptEditor/ScriptEditorWebPart.ts       | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/samples/react-script-editor/config/package-solution.json b/samples/react-script-editor/config/package-solution.json
index 94469da03..5cd166d8c 100644
--- a/samples/react-script-editor/config/package-solution.json
+++ b/samples/react-script-editor/config/package-solution.json
@@ -3,7 +3,7 @@
     "solution": {
         "name": "Modern Script Editor web part by Puzzlepart",
         "id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
-        "version": "1.0.0.9",
+        "version": "1.0.0.10",
         "includeClientSideAssets": true,
         "skipFeatureDeployment": false
     },
diff --git a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
index e8fba7d8a..68a94ebc3 100644
--- a/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
+++ b/samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
@@ -21,16 +21,20 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
     public async render(): Promise<void> {
         if (this.displayMode == DisplayMode.Read) {
             if (this.properties.removePadding) {
-                this.domElement.parentElement.parentElement.parentElement.style.paddingTop = "0";
-                this.domElement.parentElement.parentElement.parentElement.style.paddingBottom = "0";
-                this.domElement.parentElement.parentElement.parentElement.style.marginTop = "0";
-                this.domElement.parentElement.parentElement.parentElement.style.marginBottom = "0";
-            } else {
-                this.domElement.parentElement.parentElement.parentElement.style.paddingTop = "";
-                this.domElement.parentElement.parentElement.parentElement.style.paddingBottom = "";
-                this.domElement.parentElement.parentElement.parentElement.style.marginTop = "";
-                this.domElement.parentElement.parentElement.parentElement.style.marginBottom = "";
-
+                let element = this.domElement.parentElement;
+                // check up to 5 levels up for padding and exit once found
+                for (let i = 0; i < 5; i++) {
+                    let style = window.getComputedStyle(element);
+                    let hasPadding = style.paddingTop !== "0px"
+                    if (hasPadding) {
+                        element.style.paddingTop = "0";
+                        element.style.paddingBottom = "0";
+                        element.style.marginTop = "0";
+                        element.style.marginBottom = "0";                        
+                        break;
+                    }
+                    element = element.parentElement;
+                }
             }
             this.domElement.innerHTML = this.properties.script;
             this.executeScript(this.domElement);