fix: html block margin and height

reearth · Mar 19, 2023 · 09f6ef4 · 09f6ef4
1 parent f9076a3
commit 09f6ef4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/molecules/Visualizer/Block/HTML/index.tsx b/src/components/molecules/Visualizer/Block/HTML/index.tsx
@@ -104,6 +104,7 @@ const HTMLBlock: React.FC<Props> = ({
     }
 
     // Initialize styles
+    frameWindow.document.documentElement.style.margin = "0";
     frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
     frameWindow.document.body.style.margin = "0";
 
@@ -116,8 +117,7 @@ const HTMLBlock: React.FC<Props> = ({
     }
 
     const resize = () => {
-      const rect = frameWindow.document.body.getBoundingClientRect();
-      setHeight(rect.top + rect.bottom);
+      setHeight(frameWindow.document.documentElement.scrollHeight);
     };
 
     // Resize
@@ -207,6 +207,7 @@ const IFrame = styled.iframe<{ $height: number }>`
   height: ${({ $height }) => $height}px;
   width: 100%;
   min-width: 100%;
+  box-sizing: border-box;
 `;
 
 const InputField = styled.textarea<{ minHeight: number }>`

diff --git a/src/core/Crust/Infobox/Block/HTML/index.tsx b/src/core/Crust/Infobox/Block/HTML/index.tsx
@@ -102,6 +102,7 @@ const HTMLBlock: React.FC<Props> = ({
     }
 
     // Initialize styles
+    frameWindow.document.documentElement.style.margin = "0";
     frameWindow.document.body.style.color = themeColor ?? getComputedStyle(frameRef).color;
     frameWindow.document.body.style.margin = "0";
 
@@ -114,8 +115,7 @@ const HTMLBlock: React.FC<Props> = ({
     }
 
     const resize = () => {
-      const rect = frameWindow.document.body.getBoundingClientRect();
-      setHeight(rect.top + rect.bottom);
+      setHeight(frameWindow.document.documentElement.scrollHeight);
     };
 
     // Resize
@@ -205,6 +205,7 @@ const IFrame = styled.iframe<{ $height: number }>`
   height: ${({ $height }) => $height}px;
   width: 100%;
   min-width: 100%;
+  box-sizing: border-box;
 `;
 
 const InputField = styled.textarea<{ minHeight: number }>`