Iframe-resizer: Height not decreasing on increasing the window width

Created on 2 Aug 2018 · 16Comments · Source: davidjbradshaw/iframe-resizer

I have implemented this , but i have a problem .

When i am resizing the window screen to the minimize , the height of the iframe increases, but when i try to maximize , the height of iframe doesn't get decreased .

What can i do to achieve that ?

When i reduce the window width , the height of iframe gets increased ,
When i again put it at full width , you can see empty space below the iframe area.

https://www.profiledata.co.za/BrokerSites/NedbankPrivateWealth/SDOv3/components/companydetails.aspx?c=NED

Try this link as iframe

I have float content in it .

Source

bhawin-boom

Most helpful comment

I had the same issue (the iframe not getting smaller in height again) and just got it resolved. For some reason putting the doctype as the first line in the iframe fixed it.

Badestrand on 22 Nov 2018

👍2

All 16 comments

@davidjbradshaw

bhawin-boom on 13 Aug 2018

@ggtr1138 @outoftime @pomartel @vitoss @jbruni

bhawin-boom on 13 Aug 2018

@bhawin-boom - There are a few troubleshooting sections in the README. Maybe one of them may help:

https://github.com/davidjbradshaw/iframe-resizer#iframe-not-sizing-correctly

jbruni on 13 Aug 2018

👍1

Check your CSS

davidjbradshaw on 13 Aug 2018

@davidjbradshaw , I have checked my css . There are 2 divs . One is float:left; other is float:right ;.
and when the screen width is less than 700px , div with float:right becomes float:left;

I dont think that wrong to have

bhawin-boom on 13 Aug 2018

@jbruni , I have seen the Trouble shoot docs . Still getting the problem .

I have checked with each and every value of HeightCalculationMethod .

bhawin-boom on 13 Aug 2018

@jbruni , Anything you can share on this

bhawin-boom on 13 Aug 2018

@davidjbradshaw @jbruni , Forgive me if i am asking stupid questions here , When i put the content of https://www.profiledata.co.za/BrokerSites/NedbankPrivateWealth/SDOv3/components/companydetails.aspx?c=NED in a localhost file and then add it as an iframe , It works perfect.

Why SO ?

bhawin-boom on 14 Aug 2018

I also found one more issue ,
Lets say initial height of iframe is 300px and the screen is full width.
Now i resize the screen to the min . The height of iframe becomes 1100px
Now i resize the screen to full width fast , the the height i get is 600px instead of 300px .

How about that ?

@davidjbradshaw @jbruni

bhawin-boom on 14 Aug 2018

I had the same issue (the iframe not getting smaller in height again) and just got it resolved. For some reason putting the doctype as the first line in the iframe fixed it.

Badestrand on 22 Nov 2018

👍2

@Badestrand Could you please let me know if it is in the src page we need to include <!doctype html>

kshkrao3 on 30 Nov 2018

Yep

Sent from my iPhone.

davidjbradshaw on 30 Nov 2018

❤1

I too have a similar issue @davidjbradshaw. But in my case, I have autocomplete available in the src page. Autocomplete will have some 200-300 options. When the options are shown, the list actually extends the body height to some 5000px, but when the option is selected and list of options are hidden, the height of iframe never reduces back to actual height, whereas in source page it works fine and the body scrollbar will be hidden.

I tried using bodyScroll, max, lowestElement options for heightCalculationMethod. But none of them resolves the issue. Should I be opening a new issue for this or you can suggest something here. :) Appreciate any help.

kshkrao3 on 30 Nov 2018

Check your CSS, and that you have a valid DocType

davidjbradshaw on 1 Dec 2018

@davidjbradshaw Thank you so much.. It is working fine with added. I am using bodyScroll now. But I am just facing one more issue. We are using this with AEM, sightly where the html is something like below:

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}">
    iframe component
</sly>

<sly data-sly-test="${properties.frameurl}">
        <sly data-sly-use.constructedUrl="${'converturl.js' @ link=properties.frameurl}"></sly>
</sly>
<iframe src="${properties.frameurl}" scrolling="${properties.scrolling}" width="${properties.framewidth}" height="${properties.frameheight}" frameborder="0">
</iframe>

If I include sightly tags then the html will be screwed up and it will render the whole section somthing like below:

<sly&nbsp;data-sly-test.author=>
    iframe component


<sly&nbsp;data-sly-test=>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<sly&nbsp;data-sly-use.constructedurl=>

<iframe src="falsehttps://bestellung.unitymediabusiness.de/iframe?upc=2PLAY200Bconverturl.jshttps://bestellung.unitymediabusiness.de/iframe?upc=2PLAY200B" &nbsp;scrolling="no" &nbsp;width="300px" &nbsp;height="200px" &nbsp;frameborder="0" id="iFrameResizer0" scrolling="no" style="overflow: hidden;">
</iframe>
</sly&nbsp;data-sly-use.constructedurl=></sly&nbsp;data-sly-test=></sly&nbsp;data-sly-test.author=>

Could you please let me know if it doesn't support this type of set ups or it will not work with sightly templates?

kshkrao3 on 3 Dec 2018

Sorry no idea about slightly templates

davidjbradshaw on 16 Nov 2019

Was this page helpful?

0 / 5 - 0 ratings