yyppaag
/
react-native-autoheight-webview
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 30 Wiki Activity
Browse Source

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

iou90 5 years ago
parent
0439bbd872
commit
00ec7fe21b
3 changed files with 12 additions and 4 deletions
Unified 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 
         alignItems: 'center',
 115 
         alignItems: 'center',
116 
       }}>
 116 
       }}>
117 
       <AutoHeightWebView
 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 
         onError={onError}
 127 
         onError={onError}
120 
         onLoad={onHeightLoad}
 128 
         onLoad={onHeightLoad}
121 
         onLoadStart={onHeightLoadStart}
 129 
         onLoadStart={onHeightLoadStart}

+ 2
- 2
demo/config.js View File

2
2
3 
 import newsletterZeit from "./newsletterZeit";
 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 
 const style0 = `
 9 
 const style0 = `
10 
     p {
 10 
     p {

+ 1
- 1
demo/newsletterZeit.js View File

346 
 		}
 346 
 		}
347
347
348 
 }</style></head>
 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 
         <!--[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]-->
 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]-->