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.
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 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 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..