I have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)
Related
I want to preview the HTML content (which comes from the backend as a string) in my react application. I'm setting the iframe srcDoc as shown below.
<iframe width="100%" height="515px" srcDoc={previewTemplate}></iframe>
the width and height properties are setting the dimensions of the iframe. How to set the width and height of HTML content inside?
NOTE: HTML page is responsive
HTML page used can be viewed here
you can use the code below with peace of mind.
<iframe srcDoc={previewTemplate} onload="this.width=screen.width;this.height=screen.height;">
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 want to disable Boostrap 3.0 responsiveness then load a page (an invoice template) inside an iframe.
My iFrame HTML/CSS is:
<div class="row">
<div class="col-xs-12">
<iframe id="frame" src="http://my.app/template/one/pdf/html" frameborder="0" scrolling="no"></iframe>
</div>
</div>
#frame {
max-width: 1190px; // A4 page dimension ratio
min-height: 1684px;
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
I followed the instructions here, and was able to disable the responsiveness when loading the page into Chrome in iPhone 5 mode.
If I omit the viewport statement from the page head, it loads slightly off the screen like this:
If I add a viewport statement (and make it 950 wide) it loads perfectly like this:
<meta content="width=950" name="viewport">
When I then place it inside of my iframe, it just runs up as responsive like this:
I can see in my iframe's page head that the CSS file is the non-responsive boostrap version.
My questions are:
Is the iframe CSS getting overridden by the parent page's CSS. I expect no, so why would you think the template not loading in desktop mode in the iFrame?
Why does it not fit into the viewport without the meta tag per bootstrap instructions?
What could be causing the text at the bottom of the page to not be scaling with the rest of the page?
<iframe> is independent - it uses it's own html structure, thus it's own styling.
It's not possible to respond to your question without understanding the content of the 'invoice' page.
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..
I'm working on a web page that has a frameset containing a horizontal split; a sidebar on the left for a menu and a content area.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Test</title>
</head>
<frameset border="0" cols="100,*">
<frame id="SideMenu" name="SideMenu" src="SideMenu.html" scrolling="no" />
<frame id="MainPage" name="MainPage" src="LongPageContent.html" scrolling="auto" />
</frameset>
</html>
In desktop browsers (including Safari), the frameset is set to the size of the viewport and a scrollbar appears for the long page content in the MainPage frame. In Safari on iOS, the frameset expands to the same size as the content in the MainPage frame, extending beyond the visible viewport.
I want the former behavior so that the page size remains the same as the viewport, regardless of the content in MainPage. I've fiddled around with the viewport meta tag, but adjusting the viewport does not modify the frameset behavior.
I know that Apple's iOS guidelines advise avoiding framesets since scrolling is more confusing (requiring two-finger scrolling in frames), but ditching the frames is not a great option.
The safari Web Content Guide states that this is normal behavior. The frame will expand encompass your content and you will not be able to scroll.
I am sorry, but you are going to have to ditch the frames.
You can either code the side Nav into each page (which is terrible) or put something together in PHP that will load the contents of SideMenu dynamically into a column.
AFAIK, <frame> and <iframe> two-fingers-scrolling behavior has been abandoned. Since iOS 4.X thoses elements are now resizing to their content's size.
As position:fixed; doesn't work either on iOS you can't block your SideMenu frame to let the rest scroll.
This library seems to provide an interesting workaround: http://cubiq.org/iscroll