I have an iframe for a google chart which has too much spacing around it. I want to embed this in my page but crop it to get rid of the surrounding space.
I was trying to do this by setting the iframe with smaller height and width attributes but I cannot work out how to reposition the content within the iframe to center it.
Here is the iframe for the chart:
<iframe width="550" height="170" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1r56MJc7DVUVSkQ-cYdonqdSGXh5x8nRum4dIGMN89j0/pubchart?oid=1407844401&format=interactive" onload="window.frames['itunes'].scrollTo(250,250)">></iframe>
How do you reposition the content of an iframe in this way or is there a better solution?
Thanks
You should wrap the iframe in a div or something and position the iframe.
here the code:
<div class="wrapper">
<iframe></iframe>
</div>
and this is the css
.wrapper{overflow:hidden;}
.wrapper iframe{position:relative; left:-40px; top:-30px;}
Related
I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/
Following by some topics on Stack Overflow like:
Full-screen iframe with a height of 100%
How do you give iframe 100% height [duplicate]
Make Iframe to fit 100% of container's remaining height
I wanted to nest iframe on my web page. I am using bootstrap to style web page, so I used following code:
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="<test_link_here>" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>
Unfortunately my iframe is not resized to full height. I would like somehow to resize it automatically to full height.
Do you know how I can acheive it?
What you want could actually be done by changing the height : 100%; value to height : 100vh;.The vh is a unit called ViewHeight, and your full screen height is actually 100vh;
Here is a post about length units from the Mozilla team.
Try this code :
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="http://www.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>
I have a top navigator, and an iframe below the navigator which load the content.
The layout is kind of like
<body>
<div style="text-align:middle">
<div id="nav"></div>
<iframe></iframe>
</div>
</body>
The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.
But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.
How could I make the iframe always showing at the center even with a vertical bar?
I think this should be a common issue but haven't searched out a similar question here...
Edit 1:
Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:
index.html:
<html>
<head></head>
<style type="text/css">
iframe {
width : 100%;
padding : 0;
margin: 0 auto;
display : block;
}
</style>
<body>
<div style="text-align:center;margin:0 auto;overflow:hidden">
<div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
<span>test</span>
</div>
<iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
<iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
</div>
</body>
</html>
iframe2.html
<html>
<head></head>
<body style="padding:0px;margin:0px;">
<div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>
iframe.html
<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
<div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>
Result:
You can center the iframe using css,
iframe {
margin: 0 auto;
display: block;
}
See the example: https://jsfiddle.net/bnby6umd/
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%; to width: 900px;.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.
Right now I am working with an iFrame for HTML and I am trying to center align this image. When I type in align = "middle" it doesn't seem to work. I wan to place this GIF in a website. Aligning it in the center would make it look nice.
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
That is not a GIF. That is a video (either MP4 or WebM (depending on your browser)) which is embedded in the iframe. It's so small and could easily be converted into a GIF, but that's not the question here.
Add this CSS to your iframe and it should align it in the middle horizontally.
display: block;
margin: 0 auto;
http://jsfiddle.net/odezpjLy/
Check out the JSFiddle above for an example.
Place it in a div wrapper, and center the item in the <div>:
#wrapper
{
text-align:center;
width:100%;
}
<div id="wrapper">
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
</div>
Firstly here's the fiddle
I am trying to integrate a iframe like a div, I know how do this if this was a normal iframe but this iframe has a slider inside it. As a result there are two scroll bars appearing on the right side.
HTML code:
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS code:
html,body {height:100%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
Is there any way where I could make the iframe behave like a div so that the page will have a single scroll bar. overflow:none would remove the scroll from the iframe.
Any help would be appreciated.
The other answers already work well in this case, but I would just like to point out that the idea is to make the outer frame "non-existent", rather than making the iframe blend in with the page. This works in this case where the inner iframe is intended to fill the entire page.
However, unfortunately, there is no easy way to do "integrate an iframe like a div" in general (at point of writing).
There is an attribute <iframe seamless> that does exactly what you want (embed an iframe like a div), but that doesn't work in any major browser at the moment. See: http://caniuse.com/#feat=iframe-seamless. There are probably some ways to use Javascript to simulate this: e.g. https://github.com/ornj/seamless-polyfill has the page in the iframe use Javascript to communicate its scrollHeight (using postMessage) to the outer page, which then uses Javascript to change the height of the iframe so the entire page in the iframe can be shown without scrolling.
In this particular instance, with a full page iframe, set the margin of your body tag to 0:
html,body{
height:100%;
}
body{
margin:0;
}
.h_iframe iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="container">
<div class="h_iframe">
<iframe src="http://isotopethemes.com/slider-test/" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Add overflow:hidden to your CSS like this. I tried it in your fiddle and it works.
html,body {height:100%;overflow:hidden}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
You cannot write css to affect the inner contents of the iframe... but you can add an overflow: hidden; to your body.