npm
/
react-native-autoheight-webview
Watch 10
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 23 Wiki Activity
Browse Source

Remove margin from body and add padding to #rnahw-wrapper

iou90 4 years ago
parent
0439bbd872
commit
00ec7fe21b
3 changed files with 12 additions and 4 deletions
Split View Show Diff Stats
  1. 9
    1
      demo/App.js
  2. 2
    2
      demo/config.js
  3. 1
    1
      demo/newsletterZeit.js

+ 9
- 1
demo/App.js View File 

@@ -115,7 +115,15 @@ const Explorer = () => {
115 115 
         alignItems: 'center',
116 116 
       }}>
117 117 
       <AutoHeightWebView
118 
-        customStyle={heightStyle}
118 
+        customStyle={
119 
+          `
120 
+          #rnahw-wrapper {
121 
+            padding: 0 30px;
122 
+            width: 100vw;
123 
+            box-sizing: border-box;
124 
+          }
125 
+          `
126 
+        }
119 127 
         onError={onError}
120 128 
         onLoad={onHeightLoad}
121 129 
         onLoadStart={onHeightLoadStart}

+ 2
- 2
demo/config.js View File 

@@ -2,9 +2,9 @@
2 2
3 3 
 import newsletterZeit from "./newsletterZeit";
4 4
5 
-const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
5 
+const autoHeightHtml0 = newsletterZeit;//`<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I’d also use the <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
6 6
7 
-const autoHeightHtml1 = newsletterZeit;//`Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
7 
+const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with "moving".`;
8 8
9 9 
 const style0 = `
10 10 
     p {

+ 1
- 1
demo/newsletterZeit.js View File 

@@ -346,7 +346,7 @@ export default `<!doctype html>
346 346 
 		}
347 347
348 348 
 }</style></head>
349 
-    <body style="background:#ffffff none no-repeat center/cover;height: 100%;margin: 0 30px;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
349 
+    <body style="background:#ffffff none no-repeat center/cover;height: 100%;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #ffffff;background-image: none;background-repeat: no-repeat;background-position: center;background-size: cover;">
350 350 
         <!--
351 351 
 -->
352 352 
         <!--[if !gte mso 9]><!----><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">Our upstream provider AWS is deprecating support for Node.js 8. As a result, you need to switch to a more recent Node.js version.</span><!--<![endif]-->