Any ideas for using max-height on a borderless/scrolless iFrame so if it ends up being too tall the browser doesn't render a giant black area to fill in the rest of the iFrame?
I've tried setting height="100%" and max-height="xx" but that doesn't seem to work.
Many Thanks!
Your use of height="100%", using the = operator, suggests you're trying to use in-line attributes. This can work, but usually works better with absolute measurements (so 700px rather than a percentage). max-height isn't a valid attribute, so far as I'm aware, of any element except in stylesheets, so I'd suggest that you use CSS:
iframe {
min-height: 200px; /* or whatever */
max-height: 500px; /* or whatever */
}
You can, if you must, also use in-line styles, which would yield <iframe src="..." style="min-height: 200px; max-height: 500px;">
Also, while you can use percentages, to give max-height: 80%, this does seem to require that the parent element has a defined height of its own (I'm not sure if it's all browsers, or just one or two, but either way it seems a reasonable expectation in order that the browser can work out what 80% actually is).
A good JavaScript based answer seems to be the first solution from:
https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/
Resizes the iframe to suit the content. I've found that you have to manually add a bit extra for height... go figure, but seems to work.
Here's the full mark-up and JS that works for me based on that solution:
<iframe src="/app/index.html" style="width:100%;" frameborder="0" id="Iframe">
Oops, your browser doesn't get Iframes. Click Here to proceed.
</iframe>
<script>
// Adjust the iframe height to exactly as much as required by the content
var frame = document.getElementById("Iframe");
frame.onload = function() {
// add extra 50 pixels - in reality need just a bit more
frame.style.height = (50+frame.contentWindow.document.body.scrollHeight) + 'px';
// not sure if this is really required.
// set the width of the iframe as the width of the iframe content
frame.style.width = frame.contentWindow.document.body.scrollWidth+'px';
}
</script>
Related
I'm trying to use CSS vh units inside of an iframe. I'm finding that they are scaled to the size of the iframe somehow. In other words, 100vh isn't the windowheight. It's set to the height of the iframe.
Does this seem right?
Is there a workaround?
I know this is an old question, but as people move toward the vh unit, this question will become much more common.
To clarify, here's an example of the problem. We have an HTML file that loads an iframe:
<!DOCTYPE html>
<html>
<head></head>
<style>
iframe {
height: 50vh;
width: 100%;
}
</style>
<body>
<iframe src="iframe.html"/>
</body>
</html>
And its iframe:
<!DOCTYPE html>
<html>
<head></head>
<style>
div {
height: 50vh;
width: 100%;
background: blue;
}
</style>
<body>
<div></div>
</body>
</html>
The important thing to note here is that both the iframe and the iframe's div element are designated as having a height of 50vh. The intended behaviour may be that the iframe honor the parent context's viewport height or width. Instead, the result looks like this:
That is, the height of the blue element is ~25% of the browser window, instead of the expected 50% (100% of the iframe). Although we may wish the iframe to respect the viewport of its parent, this example makes a good case for how unintuitive that may be, though it surely would make the v* units more valuable for content being iframe'd in. The problem has to do with how viewport height is determined.
From the spec:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Both an iframe and the browser window can be the initial containing block, as they are both valid viewports. A viewport is not limited to the browser window, but instead is defined as a window or other viewing area on the screen through which users consult a document.
An iframe creates a nested browsing context when inserted into a document, and thus is its own viewport.
So yes, this is the intended behaviour - and unfortunately there is no pure CSS workaround - however, www139 has provided an example of how this can be accomplished using JavaScript. The problem with this begins when many elements' size are controlled using v* units.
This is an excellent question. Sadly, I haven't been able to figure out a solution in CSS but I have been able to figure out a solution in JavaScript which I think is your best bet at the moment. Remember that the frames must be on the same domain for this to work.
Hope this helps. If this answer needs improvement, please comment below :-)
Solution in Theory (can't use here on SO because of frame origin issue):
window.addEventListener('load',function(){
initializeV();
function initializeV(){
//1% of the parent viewport width (same as 1vw):
var vw = window.parent.innerWidth/100;
//1% of the viewport height (same as 1vh):
var vh = window.parent.innerHeight/100;
//assign width and height to your v unit elements here
}
window.parent.addEventListener('resize',function(){
//when the browser window is resized; recalculate
initializeV();
});
});
Edit (Dec. 2018): In the comments, I was asked to supply an example. I can't do an exact example because the codepens on Stackoverflow load over a different frame origin than the page. However, I can mimic the effect. For practical applications, please reference the code snippet above. This snippet is meant merely to illustrate how it works.
Practical Application. Uses the concept explained above but without frame reference.
window.addEventListener('load',function(){
initializeV();
function initializeV(){
//note: I can't use window.parent becuase the code snippet loads on a different frame than the parent page. See the other snippet for a practical example. This snippet is meant to merely illustrate the effect.
//1% of the parent viewport width (same as 1vw):
var vw = window.innerWidth/100;
//1% of the viewport height (same as 1vh):
var vh = window.innerHeight/100;
//this is where the magic happens. Simply set width/height/whatever to a multiple of vw/vh and add 'px'. Dimensions must be in pixels since the vw/vh measurement is based on pixels.
document.getElementById('test').style.width = 30*vw+'px';
document.getElementById('test').style.height = 50*vh+'px';
//assign width and height to your v unit elements here
}
window.addEventListener('resize',function(){
//when the browser window is resized; recalculate
initializeV();
});
});
#test{
background:red;
}
<div id="test"></div>
Hoping this jumps out at someone...
I'm using Fancybox 1.3 w/Foundation. The issue I'm having is something in the Foundation CSS is forcing my Fancybox pop-up to render too small. When I inspect the HTML on the rendered page, I see an inline style setting the height at 175px...
I'm stumped. If I remove the Foundation CSS file the problem goes away. I'm guessing I need to change something in the Height attribute but haven't had any luck.
Sample:
http://198.cmsintelligence.com/site/about-us (click 'play this video')
Without more code it's hard to debug in dev tools. But I believe your culprit is here: #fancybox-inner object {
In DEV tools that ID is applying 100% height to an object, which is what is loading your video. The object itself has a height value of 600px, but it's being overridden because that ID above also has !important on the height.
Also the height of 175px you mentioned, that inline styling is being generated dynamically based on content nested deeper within. I don't believe the fault is there.
EDIT: Got it!
I have highlighted the culprits in an image below. The first is on Line 20 of fancybox.css - the last two line 1 of foundation.min.css (no doubt a huge reset rule). Override these in some way and you'll be golden.
#fancybox-inner embed, #fancybox-inner object {
height: 100% !important;
}
object, embed {
height: 100%;
}
img, object, embed {
max-width: 100%;
height: auto;
}
http://imageshack.us/photo/my-images/692/fancyboxbug.jpg/
Just an idea, maybe you've tried it since it's pretty in your face. Like you said, the inline style is making it 175px so why not override it in your Foundatino CSS.
div#fancybox-wrap{
height: 480px;
}
You can always add !important at the end of the height(ex. height: 480px !important;) to force it to be that height always, or use em (ex. height: 3em;) to make it fluid and change depending on the screen size your viewer is using. Again all newbie things since I'm not that vintage in this field but maybe that helps in some way.
Is it possible to set a font size to a percentage of the container size? I have a list of items which have an image, a header and a description. The image resizes automatically as the user resizes the window. I would like the header font to do the same.
edit: Javascript/JQuery is fine.
In CSS3, there is the vw unit, which stands for 1/100 of the viewport width. For example,
h1 { font-size: 5.5vw; }
sets the heading font size to 5.5% of the viewport width.
However, this seems to work on IE 9 (Standards Mode) only so far. Moreover, IE 9 does not dynamically change the value of the unit when the browser window is resized, only on reload.
Just to expand on Tyler's answer, this is what javascript is meant for, though I'm tad sure you can achieve the same feat using CSS3 viewports, you will be better off using jQuery (it's usually in the cache of most browser's and always hosted on Google so no need to worry :)
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
No, this can only be done in JavaScript.
Is jquery is an option?
Super easy if it is: fiddle
<div id="container">
<p>HELLO WORLD!</p>
</div>
<script>
$(document).ready(function() {
var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
$('p').css('font-size', sizeMe);
};
</script>
I've done it with jquery in the past. Check out this article if it's of any interest to you. You can also use CSS to detect device width (not browser, and it's not supported in older browsers).
http://css-tricks.com/resolution-specific-stylesheets/
I'm working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)
I've tried pretty much everything and my last option is to hide the image repaint with a black div and then set its opacity to 0 when images are finished loading (BTW, I've tried this with a (document).ready call but it seems too soon: how would you do it?)
Specify your image's height and width attribute / its dimensions.
<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">
This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)
Chrome (or any browser really) cannot avoid this 'repainting', since they don't know on forehand what size your images will be.
Thus, you will need to explicitly specify the sizes of your images, either in the image width and height properties itself, or via CSS.
I know I am more than two years late, but how about the practice suggested here?
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%; /* ... */
Also, an important remark from the comments section to pay attention to, and improve upon the original technique:
Nice trick. However, if I was you, I would replace the "img" tag with
a background image on your div (and background-size: cover or
contain). That would avoid you the position trick, the overflow trick,
and a lot of work for the browser.
I hope someone will find this useful.
It’s hard to test, but you could try setting width/height in CSS
img {display: block; width: 100%; height: auto;}
if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects
Hope that helps
In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?
One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.
If I understand this right, could you do
.OnePageImage { height: 100%; width: 600px; }
Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:
.break { page-break-after:always; }
Then the code would look like this:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>
The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.
body > section {
padding:0 !important;
margin:0 !important;
height:25.7cm !important;
overflow:hidden !important;
}
Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far