Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested Img and Iframe

See original GitHub issue

Is this a bug report or a feature request?

Seems like a Bug.

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn’t already been reported/solved?

I did

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Noth Platforms

Is the bug reproductible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

I didn’t try

Environment

Environment: React: 16.2.0 React native: 0.52.0 react-native-render-html: 3.9.3

The Error

I have this HTML Content

<p style="text-align: center;">Notre Collection Made in France propose des modèles fabriqués dans les Vosges, ayant obtenu le label "<strong>Origine France Garantie</strong>"</p>

<p style="text-align: center;"> </p>

<div class="videoEmbed" style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="349" src="https://www.youtube.com/embed/8wpozmL-TRE?color=white&amp;iv_load_policy=3&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;modestbranding=1&amp;theme=light&amp;showsearch=0" width="560"></iframe></div>

<p style="text-align: center;"> </p>

<p style="text-align: center;"><img alt="" src="https://hivency-staging.s3.amazonaws.com/uploads/ckeditor/pictures/2/content_Visuel.png" style="width: 659px; height: 800px;"></p>

<p style="text-align: center;"> </p>

<p style="text-align: center;"><strong>Vous souhaitez tester nos lunettes ? Rien de plus simple</strong> :</p>

By encapsulating its iframe and img inside a p tag, the staticContentMaxWidth and imagesMaxWidth are ignored and oversize the width of my screen. Also, i’ve had to ignore textAlign styling, it throws an error on Android.

I’ve tried to ignore also height and width, without success.

Issue Analytics

State:
Created 5 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

6reactions

Exilzcommented, Apr 3, 2018

Hi, the height and width styles passed as HTML attributes take precedence over staticContentMaxWidth. I know this is controversial, it might be useful to add a prop to configure this behavior… So your image will be 659px wide anyway.

imagesMaxWidth seems to be resizing your image properly, whether it’s in a <p> or not.

ignoredStyles={['width']} also seems to be working on the demo.

The only problem I see here is that the width attribute of your <iframe>, it’s not being ignored by ignoredStyles since it’s not inside the style attribute.

You should be able to circumvent this by using something like this :

alterChildren: (node) => {
    if (node.name === 'iframe') {
        delete node.attribs.width;
    }
    return node.children;
}

I’ve tried on iOS and Android.

2reactions

SBogdycommented, Jun 23, 2018

Hello! I have the same problem, with staticContentMaxWidth not working for an <iframe>. My <iframe> has width attribute, so the solutions seems legit. Being a starter in react-native and javascript, I don’t really get where should that code be applied. Can you enlighten me, please? My code for rendering HTML:

<HTML 
    html={props.post.excerpt.rendered} 
    onLinkPress={(https, href) => { Linking.openURL( https, href)}} 
    ignoredStyles={['width']}
    staticContentMaxWidth={Dimensions.get('window').width}
    imagesMaxWidth={Dimensions.get('window').width}
    baseFontStyle={{ textAlign: 'center', color: 'white', fontWeight: 'normal', fontSize: 12, }} 
    debug = {true}
/>

LE: Worked for me like this:

<HTML

    alterChildren = { (node) => {
        if (node.name === 'iframe') {
            delete node.attribs.width;
            delete node.attribs.height;
        }
        return node.children;
    }}

    html={props.post.excerpt.rendered} 
    onLinkPress={(https, href) => { Linking.openURL( https, href)}} 
    ignoredStyles={['width']}
    staticContentMaxWidth={Dimensions.get('window').width}
    imagesMaxWidth={Dimensions.get('window').width}
    baseFontStyle={{ textAlign: 'center', color: 'white', fontWeight: 'normal', fontSize: 12, }} 
    debug = {true}
/>