Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Content cut off when using margin in styles #179

Closed
homerbong opened this issue Aug 19, 2020 · 6 comments
Closed

Content cut off when using margin in styles #179

homerbong opened this issue Aug 19, 2020 · 6 comments
Assignees
@iou90
Labels
bug

Comments

@homerbong
Copy link

Bug description:
Basically I receive the html from backend and I need to display inside the app. Once the content creators started to add inline style we noticed that sometimes the content was cut off vertically. I attached a screenshot taken on android. After investigating the problem I found out that this was happening only when we were specifying margins in the styles.
Initially the margin of the li tag was specified directly on the tag.
To Reproduce:

return (
   <AutoHeightWebView
      source={{ html: wrappedContent, uri }}
      scalesPageToFit={false}
      style={[styles.self, style] as any}
      scrollEnabled={false}
      viewportContent="width=device-width, user-scalable=no"
      onMessage={onMessage}
      customScript={customScript}
      customStyle={ContentStyle}
    />
)

wrappedContent is the output of the following hook

export default (content?: string) =>
  useMemo(
    () =>
      content
        ? `
<!DOCTYPE html />
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    ${content}
  </body>
</html>
  `
        : '',
    [content],
  );

contentStyle is just a constant:

export default `* {
  font-family: 'Titillium Web', sans-serif;
}
body {
  font-size: 16;
}
h1 {
  font-size: 28;
  text-align: center
}
h2 {
  font-size: 22;
  text-align: center;
}
h3 {
  font-size: 20;
  text-align: center;
}
h4 {
  font-size: 18;
  text-align: center;
}
h5 {
  font-size: 16;
  text-align: center;
}
h6 {
  font-size: 18;
  text-align: center;
}
a {
  color: ${Colors.link};
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
}
.lightTitle {
  font-size: 18;
  color: ${Colors.white};
}
.textField {
  font-size: 15;
}
.fieldTitle {
  font-size: 16;
  color: ${Colors.primary[100]};
}
.error {
  font-size: 14;
  color: Colors.error;
}
ul {
  line-height: 1.5em;
}
ol {
  line-height 1.5em;
}
li {
  margin: 1em;
}`;

Source (static HTML or url):

<!DOCTYPE html />
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <ol>
<li>Find a place where you will not be disturbed.</li>
<li>Sit in a comfortable position and relax.</li>
<li>Close your eyes and take eight slow, deep breaths.</li>
<li>When you are ready, play audio.</li>
</ol>
<p>&nbsp;</p>
<p><a><img style="display: block; margin-left: auto; margin-right: auto;" src="https://mynga-bucket.s3.us-east-2.amazonaws.com/assets/Quest_01/ch-dash/beginIcon.png" alt="" width="50%" /></a></p>
<p>&nbsp;</p>
<p style="text-align: center;"><em>After listening - scroll to continue...</em></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Your life might end tragically tomorrow, or quietly after a long life. Near or far, if you never take the time to really examine your life goals, values, strengths, weaknesses, hopes, and fears, you won&rsquo;t have anything to measure your life against. The combination of those things is an approximate answer to the question, &ldquo;<em>Who Am I?&rdquo;</em></p>
<ol>
<li>In your journal, list at the following:</li>
<ul>
<li>What do you regret most? (at least 5)</li>
<li>If you had a second chance, what actions would you take to change your life for the better? (at least 5)</li>
</ul>
<li>If you did that right, it was probably hard.&nbsp; You probably don&rsquo;t feel very happy right now. Let&rsquo;s fix that.&nbsp; Now with your pen and paper list at least 10 more things:</li>
<ul>
<li>What are you most grateful for? (at least 5)</li>
<li>What brings you the most joy in life? (at least 5)</li>
</ul>
</ol>
  </body>
</html>

Expected behavior:
Calculate height after the styles have been applied and take into account the applied margin. I ended up specifying a padding rather than a margin.
Screenshots/Videos:
Screenshot_2020-08-19-17-10-15-242_com
what I'm referring to is the last bullet point that is cut off.

Environment:

  • OS: android
  • OS version: 9
  • react-native version: 0.62.2
  • react-native-webview version: 10.2.3
  • react-native-autoheight-webview version: 1.5.1
@homerbong homerbong added the bug label Aug 19, 2020
@iou90 iou90 added android Android only and removed android Android only labels Aug 20, 2020
@JeanC17
Copy link

JeanC17 commented Oct 21, 2020

Having same issue

iou90 added a commit that referenced this issue Nov 9, 2020
@iou90
Using getBoundingClientRect to sum top & height to solve content cut …
f30a877 
…off when using margin issue: #179
@iou90
Copy link
Owner

iou90 commented Nov 10, 2020

Should be fixed with 1.5.7.

@iou90 iou90 closed this as completed Dec 8, 2020
@ayesha-we-over-i
Copy link

Still facing this issue with 1.5.8

@iou90
Copy link
Owner

iou90 commented Nov 5, 2021

@ayesha-we-over-i Can you provide your html code?

@iou90 iou90 reopened this Nov 5, 2021
@iou90 iou90 closed this as completed Nov 23, 2021
@brettins
Copy link

Still facing this in 1.6.1

mnramo added a commit to mnramo/react-native-autoheight-webview that referenced this issue May 13, 2023
@mnramo
Using getBoundingClientRect to sum top & height to solve content cut …
7b61c5d 
…off when using margin issue: iou90/react-native-autoheight-webview#179
@dwade0o
Copy link

dwade0o commented Oct 12, 2023

Also facing in 1.6.5 especially when content height is larger than 1400.

idealdev00000 added a commit to idealdev00000/WebView-ReactNative that referenced this issue Apr 25, 2024
@idealdev00000
Using getBoundingClientRect to sum top & height to solve content cut …
bb363dd 
…off when using margin issue: iou90/react-native-autoheight-webview#179
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@iou90 iou90

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@iou90 @brettins @dwade0o @homerbong @JeanC17 @ayesha-we-over-i