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..
Related
I already tried using width and height 100% on it, but the issue that arises is that the frame itself takes the whole width and height, but the video keeps its aspect ratio, with a large grey frame around it. Using embeds from Vimeo and Youtube works well, but this issue arises when I use a custom CDN-based video - which is what I need.
Have you tried doing min-width: 100% on the iframe? If the page is not full size, then it might be taking up the width of that. So you could also try: body { height: 100vh; }
My first guess was to just make a CSS rule selecting the element inside the iFrame. But tt seems as you have to do it with Javascript and change the CSS of the loaded page in the iFrame. CSS is rarely able to do this on its own.
For more information see:
How to apply CSS to iframe?
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 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 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.