I have this website: http://thc-racing.ucoz.com/index/forum/0-14
It can be seen that under the iframed forum there is a huge space, I made it so I can display as much as I can while navigating but, is there any way i can make the height adjust after each page inside is loaded?
Code:
<iframe
style="-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px"
height="4800" width="900"
frameborder="0" src="http://thc-racing.forumotion.co.uk/"></iframe>
I have access to CSS and Scripts on the forum.
Thanks
There is a similar question at Adjust width height of iframe to fit with content in it where you could use the code provided and modify it to adjust width and height with your own constant values, instead of auto-adjusting as the code provided in the accepted answer does.
Related
This question already has answers here:
Adjust width and height of iframe to fit with content in it
(35 answers)
Closed 4 years ago.
I have a site where effectively i want to create a banner across the top and beneath display another site in it's entirety without an additional scrollbar within the page. So i've considered iframe but i cannot get it to display correctly. I want the page to load to the full height of the subservient pages content and alter accordingly. I want the simplest code possible to avoid confusion as my understanding of this is limited. This is the code i have tried
<iframe src="https://edition.cnn.com/" width="100%" height="100%" scrolling="no">
iframes are not supported by your browser.
If i put in say 5000 as the height i can display most of the page without a fixed scroll frame. If i put 100% as the iframe height the iframe is is very short like 150 high (a guess), dunno why it defaults to this small size if its 100%.
So is there a code i can add to the above so that it automatically adjusts the iframe to the full height of the content it is displaying.
Any pointers very much appreciated.
Thanks
p.s i used cnn purely for example purpose.
If you try to set the height to a 100%, this will mean that the element will try to fit a 100% in given property of given element's parent element. So for example, if the iframe height has been set to a 100% and the parent element has a height of 400 pixels (400px) and no other elements are present in given parent element, then the iframe will have the exact same size (not counting any whitespace that might occur).
For reference see my fiddle:
.iframe-container {
height: 400px;
}
<div class="banner">
Banner
</div>
<div class="iframe-container">
<iframe src="https://edition.cnn.com/" width="700px" height="100%" scrolling="no">
</iframe>
</div>
<div class="something-else">
Add here something else eventually...
</div>
JSFiddle
In this example, the height has to be expressed in pixels on the (parent) element with the class called iframe-container in order for the iframe to have a height assigned to it.
I'm trying to put a Facebook social plugin <iframe> in this layout, but the problem is the content of this <iframe>, its not adapting to its parent width.
This is the <iframe> code:
<iframe id="fb-page" src="https://www.facebook.com/plugins/page.php?
href=https%3A%2F%2Fwww.facebook.com%2F505180683015806&tabs=timeline%2C%20messages&
height=500&
small_header=true&
adapt_container_width=true&
hide_cover=false&
show_facepile=false"
height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
*Code altered just for better presentation of PHP parameters.
As you can see, adapt_container_width is set to true, but nothing change, no matter the size of wrapper on page loading, always get width if passed in parameter or set width 340px, which is Facebook default value.
What was tested:
Specify width value as a PHP parameter, results in a content with absolute width and can cause some overflow content to be hidden.
Specify width with value '0' as a PHP parameter, results in a content with width 0px.
Specify width with value '100%25' as a PHP parameter, results in a blank frame.
Specify width with 100% on iframe element, don't change content width that will be always 340px (Facebook default value), or value defined via PHP parameter.
You can check with this fully functional jsfiddle, that already contain iframe code and HTML layout.
What I expect:
A way to make <iframe> content use 90% of its parent, instead of specify a absolute width and kill the responsiveness. And just use the <iframe> code that Facebook provide as option to render its content.
Thanks in advance.
Same for me. The only solution I came up with is:
.fb-likebox {
max-width: 288px;
overflow: hidden;
width: 288px;
}
with overflow:hidden at least doesn't make it look broken, but yes it does hide from the box.
I am working with this page:
http://icelandwithkids.com/2016/02/11/do-i-need-a-4wd-awd-4x4-car-in-iceland/
There is an iFrame that provides a Google Map:
<iframe width="100%" height="500" src="https://www.google.com/maps/embed?pb=!1m24!1m8!1m3!1d901747.8867442308!2d-19.44933680502082!3d63.804830147198125!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x48d74a424936b0d1%3A0xbe83531b006d778d!2sVik%2C+Iceland!3m2!1d63.4186315!2d-19.0060479!4m5!1s0x48d11a6e58c79679%3A0x48dc5b5397a88a8d!2sSveinstindur%2C+Iceland!3m2!1d64.1069444!2d-18.4166667!5e0!3m2!1sen!2sus!4v1455105815201/" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
No matter what I do, the height of the iFrame will not change-- it is stuck at a very minimal height. I've tried using a perentage; I've tried some style stuff, as I found on this page. But nothing seems to make a difference.
I assume that some CSS elsewhere on the page is preventing the iFrame height option from being used?
Thanks for any help.
Another possibility is that the iframe is inside a div or another size-limiting container. Try increasing the size of the container that the iframe is inside of.
Because in your CSS you have:
embed,iframe,object,video{
height:auto !important
}
This forces it to be auto no matter what you do.
Also you have an external file that also set the heights of the iframe to auto !important
cache.skin.css
Remove those then you can set your height to whatever you want.
I use iframe to embed a widget from my site to the other sites.
This iframe contains several DIVs and one of them (#statements) is usually longer than the max height of iframe that I set up.
When I open it in a browser, it looks fine:
http://noduslabs.com/portfolio/hitech-companies/
However, when I hope it on an iPhone / iOS - the iframe height parameter is ignored and I see the full length of the page.
How do I avoid that?
Here's the code I currently use:
<iframe width="100%" height="660" src="http://infranodus.com/seogoogle/seoseo?background=1" frameborder="0" allowfullscreen></iframe>
Thank you!
UPDATE
In fact I don't want this iframe to be fixed height of 660, rather – that the user who embeds it could set up any height and that it would work on iOS (so 200 or 1000 - like they want).
iframe{
height:660px;
}
Put that in your css file and it should be done.
CSS height is typically preferable to explicit height declarations. In this situation especially because you can also provide a media query.
E.g.:
#media only screen and (max-height:800px){
.myiframe{
height:700px;
}
}
I am working with a webpage with an iframe within it. The iframe has a fair amount of data in it and every-time it loads its height expands to the extent of the content within. However this puts my page out. Is there anyway to lock the height of the iframe and allow the user too scroll through the content??
Hmm, weird... do you have an example link of this issue?
When I try a simple iframe:
http://jsfiddle.net/mP6wT/5/
<iframe src="http://example.org/"></iframe>
It seems to be sized pretty small by default, and scrolls in Chrome/FF/Win... Rather than adjusting to the height...
But at any rate, you should be able to lock the height with CSS:
http://jsfiddle.net/mP6wT/7/
<iframe src="http://example.org/" style="height:400px;"></iframe>
Watch out for iOS. Its kinda screws everything up:
http://salomvary.github.io/iframe-resize-ios-safari.html
how to properly display an iFrame in mobile safari
Give the iframe a fixed height and scroll auto and you should be good.
<iframe height="100px" scroll="auto"></iframe>
Note that 100px is just an example, you might want to choose a height that suits you.
Your iframe probably has height: 100%; set or even the height is being set via script of some sort. Technically you can set the height <iframe height="300"></iframe> or <ifreame style="height: 300px;"></iframe> = height of 300px.
Since you didn't provide any code, I cannot help you any further :( Provide your live example or code, then we can help you better. But generally, either try manually setting the iframes height, re-check your pages code.. maybe some script is setting the height or maybe the code inside the iframe..