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.
Related
I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).
Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.
Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?
Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.
Edited to add:
Following the first two responses, I inserted the HTML line
<iframe style="width:100%; height:500px;overflow:auto;">
and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:
Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):
<center>
<div>
<iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
</iframe>
</div>
</center>
For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.
Even though you don't have direct access to the CSS, you can still change css by using inline styles.
The way you do that is by using the style="" inside the tag you want to change the CSS styles.
The way you make the width dynamic is by using the size as percentage instead of pixels.
For example:
<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>
Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.
You can use inline styling in the iframe element. Have a look at this link.
I set width to 100%, which means it will resize to whatever the size of the container. The height is fixed, but if it can't fit inside the container the overflow: auto; will make the scrolls show up.
<div>
<iframe style="width:100%; height:500px;overflow:auto;">
</iframe>
</div>
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 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 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.
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..