Somehow a second scrollbar appears in my development page
http://topdodavatel.cz/defakto/produkty/stoly/
Do you have any idea why this happens? I believe the content should automatically fit into the page and only one scrollbar would be necessary.
Here is how the problem looks like
remove the
overflow-x: hidden;
in your body, html CSS.
Should be fine after this.
Try this code. iframe height set based on content height. so scroll not show
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Related
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.
In my application I have the Iframe that has some log file content. Since I will always be interested in the latest logs. I always want to keep the scroll bar to the bottom. How can I achieve it.
<IFRAME src="/results/show_client_log?testinstanceId=<%=params[:testinstanceId]%>&clientIp=<%=params[:clientIp]%>" id= "frame" style="width:100%;" height=500px scrolling="yes"></IFRAME>
This the code that enables the scrollbar to iframe.
Does adding this to style section in your iframe work?
overflow: auto;
or maybe even
overflow-x:scroll;
or
overflow-y:scroll;
There is a way to align the scroll bar from an iframe to right? its by default to left.
any idea?
take a look here i wanna see the search box when i load the page!
i have an application that has an ifram, in the ifram I'm loading a website that the search box is on the upper right, and i want that when the page loads i should be able to see the search box right away without having to scroll to the right.... something not clear?
can you use jquery? if yes, you can do the following:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This is some text. This is some text. This is some text.
<div id="frame" style="width: 200px; height: 200px; overflow: scroll";>
<iframe src="http://www.w3schools.com/default.asp" width="1024" height="768" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
This is some text. This is some text. This is some text.</p>
<p>The align attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(750);
});
</script>
</body>
</html>
If you copy and paste the code into a html file and open it in your browser, you'll see that the iframe is automatically scroll to the very right.
The key changes are:
import jquery in your html file
add scrolling="no" to your iframe
specify the width and height of your iframe, it should be roughly the same as the actualy width & height of the embedded page
wrap your iframe in a <div>, be sure to specify the width & height (less than the iframe width & height)
add the javascript code before the closing </body> tag
<script type="text/javascript">
jQuery(document).ready(function () {
$("#frame").scrollTop(10).scrollLeft(800);
});
</script>
I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>
With Safari you can disable most iframe scrolling by setting style="overflow: hidden;" on the iframe. However, if you click in the iframe and move the mouse the content scrolls anyhow.
Example:
<html>
<body>
<iframe style="width: 100%; height:100px; overflow: hidden;" scrolling="no" src="scrollcontent.html">
</iframe>
</body>
</html>
scrollcontent.html:
<html scroll="no" style="overflow:hidden;">
<body scroll="no" style="overflow:hidden;">
<div style="background-color: green; height:100px;">A</div>
<div style="background-color: red; height:100px;">B</div>
</body>
</html>
In this example, the iframe should only show a green area and it should be impossible to reveal the red area. This is mostly true: there is no scrollbar, the mouse wheel doesn't do anything and neither do the arrow keys.
However click and drag still scrolls the view. This is particularly noticeable when selecting text.
Does anyone know any trick to stop Safari from doing this?
You could add an window.onscroll method that does a window.scrollTo(0, 0);. It's not pretty but it should work.
In worst case I would try loading the content with jquery load()
and then you wrap everything with a <div style"overflow:hidden">your content...</div>