Auto Adjust Height Of Iframe Based On Content - Mobirise Forums

Có thể bạn quan tâm

Toggle navigation Mobirise Forums

Discussions
Categories

Home › Help auto adjust height of iframe based on content

A1Retouching April 2018 in Help Hi group!hope everybody is having a good weekend so far.i've been trying to find a solution to this in the forum but had no luck so i'm hoping somebody knows the solution.what needs to be done to have an iframe automatically adjust it's height to the content?here's what i have:an accordion with an iframe as contentheight of that iframe does not automatically adjust to it's content so i see a scroll bar at the right side of it, i would like that scroll bar gone.any help is greatly appreciated!i am working on that website as you're reading thishttps://mobirise.com/extensions/kit/THANK YOUMartin

Comments

kully April 2018 Google "bootstrap disable scroll". There are some suggestions based on your version of bootstrap, or refine based on your version.
A1Retouching April 2018 ok great, thank you, Kully!
steveriches April 2018 Add your iframe something like this: <iframe id="testimonials" name="testimonials" src="link-goes-here" allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';" scrolling="no" style="width:100%;border:none;"></iframe>
A1Retouching April 2018
steveriches said:
Add your iframe something like this:
<iframe id="testimonials" name="testimonials" src="link-goes-here" allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';" scrolling="no" style="width:100%;border:none;"></iframe>
thank you, Steveriches!i tried it but it seems this still adds the scrollbar at the right of the iframe
kully April 2018 Didn't work for me either, Steve. Could be something to do with Facebook.
A1Retouching April 2018 i wrote emails to mobirise support once i hear back i'll give you an update, hopefully a solution
steveriches April 2018
A1Retouching said:
steveriches said:
Add your iframe something like this:
<iframe id="testimonials" name="testimonials" src="link-goes-here" allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';" scrolling="no" style="width:100%;border:none;"></iframe>
thank you, Steveriches!i tried it but it seems this still adds the scrollbar at the right of the iframe
Try the following : <iframe id="testimonials" name="testimonials" src="link-goes-here" allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';" scrolling="no" style="width:100%;min-height:1000px;border:none;overflow-y:hidden;overflow-x:hidden;"></iframe> You may need to play with the min-height:1000px; value.regardsSteve
Tommy_Herrmann April 2018 Hi,I have tried this years ago with my old software "NetObjects Fusion" with a dynamic iframe. This is working with a framed page from the same domain only!This needs nothing else but this script: <script type="text/javascript"> var framefenster = document.getElementsByTagName("iFrame"); var auto_resize_timer = window.setInterval("autoresize_frames()", 400); function autoresize_frames() { for (var i = 0; i < framefenster.length; ++i) { if(framefenster[i].contentWindow.document.body){ var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight; if(document.all && !window.opera) { framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight; } framefenster[i].style.height = framefenster_size + 'px'; } } } </script>
A1Retouching May 2018 Steve, i finally had time to try this!sorry it took so long!anyway, it DOES work on desktop computerwhen the page width changes for example on a tablet and/or smart phone the scroll bar again shows up...
steveriches May 2018 Try adding this custom CSS: @media (max-width: 760px) { #testimonials{ min-height:1500px; } } Change the #testimonials to the iD of your iframe.Play with the min-height:1500px; changing the 1500px as necessary.Or try: <iframe id="testimonials" name="testimonials" src="link-goes-here"; allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px !important';" scrolling="no" style="width:100%;min-height:1000px;border:none;overflow-y:hidden;overflow-x:hidden;"></iframe> regardsSteve
z17 January 2019
steveriches said:
Try adding this custom CSS:
@media (max-width: 760px) { #testimonials{ min-height:1500px; } } Change the #testimonials to the iD of your iframe.Play with the min-height:1500px; changing the 1500px as necessary.Or try: <iframe id="testimonials" name="testimonials" src="link-goes-here"; allowtransparency="true" onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px !important';" scrolling="no" style="width:100%;min-height:1000px;border:none;overflow-y:hidden;overflow-x:hidden;"></iframe> regardsSteve
thx you
fotoaudiovideo January 2019 Hi z17, so what are codes that I use? Thanks
nandishug May 2019 Hi,Thanks for the above code Iframe autoheight based on the content. I updated script code in master file. Once i run the project, its working fine but show the below error in the console. Iframe source file within the project folder only.Uncaught DOMException: Blocked a frame with origin "http:/ / XXXXXXXXXX.com" from accessing a cross-origin frame. at autoresize_frames (http:/ / XXXXXXXXXX.com:49:41) at :1:1Can you please help me for the above issue. image.png 11.5K iframe.PNG 11.5K
steveriches May 2019 It may be that your main page is on an SSL (https://) but the content you are loading in the ifrme is not (http://) Most browsers will block non-SSL pages from loading on an SSL enabled page.
xserve2 May 2019 I think that your issue is that the content you wish to display in the frame is being accessed from a web site that blocks any other site from displaying their content - It is quiet a common practice