Double vertical scrollbars are showing on iFrame page - html

I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)

To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.

I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.

Related

Is it possible to control the scrolling of a page?

I have an HTML page with an iframe like this:
<body>
<h1>Page</h1>
<iframe src="./randompage.html" frameborder="0" allowfullscreen></iframe>
</body>
However, the page itself scrolls and the iframe also scrolls. Is there a way to stop the page scrolling and have only the iframe which scrolls?
(Note that this is for a phonegap app)
Extra Information
It seems that body { overflow: hidden; } doesn't work on phonegap (see here: Phonegap and Android overflow issue).
I would try to make sure the content fits inside the viewport.
If that's not an option, trim the body by hiding the overflow.
body {
overflow: hidden;
}
Use overflow-y: hidden to stop your page from (vertical) scrolling. You could add this to your body like this
body{
overflow-y:hidden;
}
Look at this fiddle
If you want to disable both vertical and horizontal scrolling, you can use overflow: hidden;.
As overflow:hidden does not work in your case, you could, depending on your exact use case, make the iframe position:absolute and define it's position via left and top. This would mean the parenting page does not overflow beyond the viewport.

Scrollbar only on one div and not the whole body

I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.

why would someone write overflow: hidden on <html> tag

I was reading source code of an template and i got code
<html class="js" style="overflow: hidden">
My question is why would someone will apply overflow:hidden on html tag. what benefit it will give.`
You would use overflow:hidden when you have dynamic, responsive content, for the most part, or at least, that is what I use it for. For example, if you have a page with content that grows in height as you shrink the page, you may want to just hide whatever is not visible in the regular height of the div
It's most likely to remove all scroll bars.
When you set overflow: hidden, anything that is outside of the element is hidden, obviously. What this does when you attach it to the html element is hides everything that is not on the screen. The browser then sees that because everything that is not on the screen is hidden, there is nowhere to scroll to, so it hides the scroll bars.
Templates that want a clean, full browser look will remove scroll bars if they feel that there is nothing that the user should need to scroll to.
Overflow hidden can be used to clear floats http://jsfiddle.net/PRwVT/1/ add
.wrapper {
border: 1px solid;
padding: 3px;
background: red;
overflow: hidden;
}
to overwrite the .wrapper class in that fiddle and you will see what I mean. That being said the only element that could have floats and be a direct child of the html element is the body tag.
This disables the page from scrolling. So for example when you might open an overlay on a page and you would like to be able to scroll the overlay content but not scroll the page behind it at the same time.
In this case you might add a class onto the html element that sets 'overflow:hidden' when you click a button to open the modal, then remove that class when you click the close button on the modal.
The modal would have to have a fixed position for this to work.

Preventing horizontal scrolling after a certain width

I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.

overlong image header, but how to only show horizontal scrollbar on body content?

I have a 4000px width image slap on the header of my site. for now, the way I hide the horizontal browser scrollbar is with this:
html
{
overflow-x: hidden;
}
Unfortunately that will make the horizontal scrollbar never appear. I would the browser scrollbar to appear when the main content of my site is hidden from view.
What is the technique/style for this?
Thanks
Put the image into a div with width: 100%, a defined height and overflow: hidden.
By the way, overflow-x is not supported by Internet Explorer 6, so it's not perfectly safe to use yet.