react-native-render-html icon indicating copy to clipboard operation
react-native-render-html copied to clipboard

Published 20 hours ago • verified publisher icon meliorence

Migrating to v6 - absolute positioning not working

Open MicahDavid opened this issue 2 years ago • 4 comments

Decision Table

  • [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

  • [X] I have read the HELP document here: https://git.io/JBi6R
  • [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
  • [X] I have confirmed that this bug has not been reported yet

Description

Using div elements with absolute positioning is not working in v6.x, but works fine in v5.

React Native Information

System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 161.46 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/micahsklut/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.2, 30.0.2, 30.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: ^0.70.4 => 0.70.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.4

Tested Platforms

  • [ ] Android
  • [X] iOS
  • [ ] Web
  • [ ] MacOS
  • [ ] Windows

Reproduction Platforms

  • [ ] Android
  • [ ] iOS
  • [ ] Web
  • [X] MacOS
  • [ ] Windows

Minimal, Reproducible Example

Here is what my html component looks like

<HTML
    contentWidth={screenWidth}
    source={{ html: data.timeline.baseGraph }}
    classesStyles={baseGraphStyles}
/>

Here's a simple example that is not working with absolute positioning. Note the div with absolute positioning also has a style attribute that contains the left positioning and width of the element. The left/width work fine, but the element is not being absolute positioned.

<div id="graph-bg">
  <div id="night" style="left:5.5%;width:6%">Jan</div>
</div>

style example

export const baseGraphStyles = StyleSheet.create({
    'graph-bg': {
        backgroundColor: '#fff',
        borderLeftColor: globalStyles.colors.gray100,
        borderLeftWidth: 1,
        borderRightColor: globalStyles.colors.gray100,
        borderRightWidth: 1,
        borderBottomColor: globalStyles.colors.gray100,
        borderBottomWidth: 1,
        height: 129,
        position: 'relative',
    },
    'night': {
        position: 'absolute',
        height: '100%',
        backgroundColor: globalStyles.colors.gray100
    },
})

Additional Notes

The Code works fine in 5.1.1.

The absolute positioning is not working the v6 versions that I've tested: 6.3.4 and 6.2.0.

MicahDavid avatar Nov 16 '22 16:11 MicahDavid

@MicahDavid can't guarantee it will fix it but classesStyles does not expects StyleSheet.create styles, but rather a plain object.

jsamr avatar Nov 16 '22 17:11 jsamr

@jsamr Thanks for the suggestion. I did try this, but I had the same result adding the style object inline.

The StyleSheet.create did work previously in v5. I used this approach, because I import the stylesheet in multiple components. But, I suppose, i could just create an object variable to import in multiple places.

MicahDavid avatar Nov 16 '22 19:11 MicahDavid