I am trying to add an html iframe on my website but I can't seem to get the source content to stay within the iframe on mobile/resize to fit within the iframe on mobile.
This is my webpage (works as desired on desktop, doesn't work as desired on mobile) - https://www.stlpremierrealestate.com/search
This is the html i have inserted onto my site -
<div><iframe src="https://www.marissearch.com" width="100%" height="800" scrolling="yes"></iframe></div>
Thanks for the help in advance!
I've taken a brief look at the website you've provided, and the issue is unrelated to the iframe.
You have this CSS rule in your codebase which is giving you the undesired result on mobile devices:
.dmDesktopBody .dmInner {
min-width: 960px;
}
Related
I am loading remote content in an iframe. Since the iframe width is smaller than the full width of the html doc, the mobile view of the site is displayed. Is there a way to force the desktop view? E.g. by "fooling" the CSS of the remote site into thinking that the width of the iframe is larger?
I think what you need is something like what is request here:
How can I scale the content of an iframe?
In the comments to Ixs answer is the link with an example:
http://jsfiddle.net/dirkk0/EEgTx/show/
What you need to do is to change the zoom of the page inside the iframe to trick media queries, so the idea is that a 1000px width iframe with zoom of 0.8 will trigger a ~1200px media query. You change the values to what you need.
Use scale and translate in an iframe:
Unfortunately, it seems that there is not a simple method to set the iframe tag as desktop view, but you can use scale and translate in iframe as following to have the desktop view of a URL in a part of your webpage.
<div style="width:300px;height: 220px;direction: rtl;background-color:red;">
<iframe src="https://iransitemap.ir" style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;" ></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 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;
}
}
Hello I am unable to stretch an iframe to display it's entire content.
Consider this:
http://jsfiddle.net/nDz32/
the content is clipped and I can't scroll down to see the rest of the comments.
Now consider this:
where I have just removed height: 100% !important
http://jsfiddle.net/rASW7/1/
I can scroll through all the comments.
Problem:
This doesn't work in an actual browser. In a browser like Chrome the content is clipped regardless of what I set. I need to have it stretch 100% in every direction as I am to embed it in a webview on a mobile device.
I am helpless I tried every combination I could think of and yet I can't get it to display like it does in the second link inside an actual browser...
I did this on my site. Does this work for you?
Replace yours with this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {width: 100% !important; }
http://jsfiddle.net/nDz32/1/
Looks like the issue was local files using the SDK get resized incorrectly even with CSS styling.
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)