I had an issue with this scroll as in this image:
The issue is that I want only the vertical scroll to appear and not the horizontal scroll. I had used overflow:scroll attribute while coding. Will it look the same in Firefox and IE or is there any other way to do that?
Just use overflow-x: hidden; overflow-y: scroll; or overflow: auto; instead of overflow: scroll;.
Related
I am converting a Static Page to Responsive Page. When I resized my page to a lower width then horizontal scroll-bar and some amount of margin is also appearing in the bottom and right side of last div/Footer.
I have used overflow property in my code but still I am not getting the desired result.
body {
margin:0%;
padding:0%;
overflow-x: hidden;
}.
Due to some problem with imgur, I am unable to upload an image of my problem.
Please, suggest me some advise.
try this
body {
overflow-x: hidden;
max-width: 100%;
}
Open developer tools (F12) and locate the block that goes beyond the border of the page but the best, show your page code.
overflow-x: hidden; os only for horizontal overflow: This still allows for a scrollbar at the right side for vertical scrolling.
overflow: hidden; is both for horizontal and vertival overflow.
To clip my webpage to the screen, I use this code in CSS:
html, body {
max-width: 100%;
overflow-x: hidden;
}
However, when scrolling on iOS, the page becomes choppy. I tried using this code:
-webkit-overflow-scrolling: touch;
All it did for me is change overflow-x to scroll (although with overflow-x is scrollable, the page scrolls smoothly). I have also tried putting the code above as a style in HTML.
Thanks in advance.
When using:
-webkit-overflow-scrolling: touch;
You must also set:
overflow-y: scroll;
Hope this helps!
I have a standard HTML table. I didn't set the width of the table so it's okay if it fits on the page. However when the table contents are too wide then they extend outside of the enclosing DIV. Is there a way I can make it so that a scroll bar appears only if it's too wide?
Note I tried to add "overflow: hidden" to the DIV but then it just cuts off the table and I cannot see any more.
Use overflow:auto.
Read & Test it here
use overflow-x: auto; for horizontal scroll and overflow-y: auto; for vertical scroll and use overflow: auto; if both direction.
.containingDiv {
overflow: hidden;
overflow-x: auto;
}
Adding scroll bars only when necessary is the purpose of overflow:auto; in CSS and Overflow: scroll; will add them all the time, which probably isn't what you want.
maybe overflow: scroll or overflow: auto ?
This set a scrollbar if the content is to big.
Use overflow: auto on the div.
Note that it will only work is your div has a fixed width!
You want like This, This is also animate which is more helfull
I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?
If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}
Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.
overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;
Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.
How do you set the overflow scroll without the bottom scroll?
I only need to show the side scroll for the wrapper of the content.
This will show only vertical scrollbar.
#element {
overflow: auto;
}
OR:
overflow-x:hidden;
overflow-y:auto;
Some browsers support
overflow-x: visible|hidden|auto|scroll;
overflow-y: visible|hidden|auto|scroll;