Making injection of clearfix element during iframe content initialization optional

[jayjayjpg]

Hey, thank you for putting this handy library together! I'm just trying it out for a project for the first time and works pretty smoothly.

One thing I noticed though was that - for some of the pages in my application - the injection of the clearfix element during the initialization of the iframe content window will lead to most of my iframe content being hidden behind this specific clearfix element.

Is there currently a way to opt out of this injection? If not, would it make sense to provide an option flag that defaults to true to make this a non-breaking change for current users but still allow other users to opt out of the automatic clearfix element injection?

If this seems feasible, I'm happy to send a PR. Looking forward to your feedback!

[davidjbradshaw]

Not heard of anyone having that issue before, does using a different height calculation method help?

…

On Wed, Jul 11, 2018 at 5:35 PM, Jessica Jordan ***@***.***> wrote: Hey, thank you for putting this handy library together! I'm just trying it out for a project for the first time and works pretty smoothly. One thing I noticed though was that - for some of the pages in my application - the injection of the clearfix element during the initialization <https://github.com/davidjbradshaw/iframe-resizer/blob/d8434af956f9d54981e956a47969bb26e84089bc/js/iframeResizer.contentWindow.js#L171> of the iframe content window will lead to most of my iframe content being hidden behind this specific clearfix element. Is there currently a way to opt out of this injection? If not, would it make sense to provide an option flag that defaults to true to make this a non-breaking change for current users but still allow other users to opt out of the automatic clearfix element injection? If this seems feasible, I'm happy to send a PR. Looking forward to your feedback! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#606>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAkHEq_KKYQSdOv0ZJXkfE5ORyL5JQl-ks5uFhtcgaJpZM4VLYBt> .

-- David J. Bradshaw )'( [email protected] 'The people we think are a little weird are the ones who change the world' - Simon Sinek

[jayjayjpg]

Yes exactly, this issue is showing up with all heightCalculationMethods that are described in the README.

I want to emphasize that this is not an issue with the library itself, but rather with the integration of the library with other applications: As far as I can see it, iframe-resizer adds the clearfix div element pre-assuming that there is no particular styling attached to itself as an element in the context of the application that it is put into.
E.g. in the app I'm working on there's a styling used (which cannot be refactored away easily either), which assumes a particular element inside of the app to follow right after the body tag. The styling sets the height of this particular element to 100%:

body > * {
    height: 100%;
}

In this scenario the clearfix div that is added to the DOM by iframe-resizer suddenly becomes the direct descendant of the body element and therefore inherits this styling, hiding all the other content.

The injection of the clearfix element is something that might also change the layout of other applications unexpectedly, in which the DOM change is not anticipated. I think it would be cool to leave the clearfix element as a default so everyone can still reap the benefits of it. Yet, I think it would be useful for users to be able to opt-out of it, in case they have particular styles added to their apps which rely on a certain DOM layout to be present and stay in place.

In my case, I wouldn't know how to circumvent this issue except for checking that my application is loaded as an iframe and then appending a particular class to the body tag which will update the aforementioned default styling.

What are your thoughts on this?

[jayjayjpg]

I think this is actually described in the issue #427 as well:

Another edge case would be if for some (evil) reason there was a global style setting a margin or min-height to all divs, then the clearFix one may end up creating an extra space at the bottom.

[davidjbradshaw]

I just tried to reproduce this by adding your css to the example file and it does not create an issue

[davidjbradshaw]

Anyway I will add height:0 to it's inline style to guard against this.