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

[iframe-plugin] Content doesn't scale to fit if the container has some padding #34

Closed
3 tasks done
demedos opened this issue May 6, 2021 · 5 comments
Closed
3 tasks done

[iframe-plugin] Content doesn't scale to fit if the container has some padding #34

demedos opened this issue May 6, 2021 · 5 comments
Labels
bug Something isn't working

Comments

@demedos
Copy link

demedos commented May 6, 2021

Oath

I swear that I have completed these tasks before submitting:

  • I have read the README
  • I have checked that the issue has not been reported yet
  • I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin

Bug Report 

Content doesn't scale to fit if the container has some padding

Environment

React Native
System:
    OS: macOS 11.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 247.13 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.3, 30.0.2, 31.0.0
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.14.0 => 16.14.0 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Libraries
  • react-native-render-html: 5.1.0
  • @native-html/iframe-plugin: 1.1.2
  • react-native-webview: 11.4.3
Devices
  • simulator iPhone 11
    • OS: 14.4
    • Environment: development

Reproduction

Render a component with some padding around the iframe

<View style={{ padding: 16 }}>
    <HTML
        renderers={{ iframe }}
        WebView={WebView}
        source={{
          html: `<iframe src="https://getbootstrap.com/docs/5.0/examples/album/" />`,
        }}
    />
</View>

Description

  1. Create a container with some padding and render the iframe in it

Expected output: the iframe scales to fit its container
Observed output: the iframe overflows and some parts are not visible

Reproducible Demo

snack: https://snack.expo.io/AfrVZoTgW (just check the code, iframes won't display on the website)
@demedos demedos added the bug Something isn't working label May 6, 2021
@jsamr
Copy link
Collaborator

jsamr commented May 6, 2021

@demedos This is expected. You should provide contentWidth prop to HTML component. Quoting from the docs here: https://github.com/meliorence/react-native-render-html#props

contentWidth: The width of the HTML content to display. If you don't pass this prop, images might overflow horizontally and take up to all their physical width. The recommended practice is to pass useWindowDimensions().width minus any padding or margins.

@demedos
Copy link
Author

demedos commented May 7, 2021

@jsamr Duh, I haven't read the prop description on the docs. Thank you.

@demedos demedos closed this as completed May 7, 2021
@jsamr
Copy link
Collaborator

jsamr commented May 7, 2021

@demedos No worries :-) happy coding!

@demedos
Copy link
Author

demedos commented May 7, 2021

@jsamr I was wondering though, when the renderer was integrated into react-native-renderer-html the width of the content was calculated automatically, which was quite handy because my paddings are dynamic. Is there any way to replicate the old behaviour?

@jsamr
Copy link
Collaborator

jsamr commented May 7, 2021 •
edited
Loading

@demedos If I understood your requirement well, this feature is available in v6 (foundry release)! Yet in alpha, but very soon the API be frozen and beta-released with a brand new doc website! See meliorence/react-native-render-html#430

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jsamr @demedos