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.
Related
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;
}
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 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 need to make the embedded video responsive. I tried the solution introduced here with no success. The width of video stays the same and not scales down making it look out of bounds on mobile device. How to make flickr video responsive?
Due to that fact that Chrome wasn't able to copy source code inside iframe, here is the screenshot:
<div class="flickr-embed-photo"> has an inline style with a width. Apparently it takes it from its window size, and the "window" is the iframe. And the iframe has an inline style attribute with heights and width... can you try something like
iframe {
height: auto !important;
width: 100% !important;
}
If using latest Bootstrap 4.6, you can use classes from the Embeds utility. Something like the below should work but you may need to select the proper class for your embed proportions and remove the flickr-embed-frame since flickr-embed JS could be placing inline code there.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://your-flickr-embed-url" ></iframe>
</div>
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)