I have this nasty horizontal scroll bar at the very bottom of my HTML page:
I tried this so far:
body {
width: 900px;
margin: auto;
overflow-x: hidden;
}
but no luck.
You can see the entire page implementation here. Also, you can view the page in action here.
The problem is not in body. It is in your div which has the id="main".
You added overflow-x: scroll; there. There are two solutions for this
In your #main {} CSS:
Solution 1: If you want to add scroll on content overflow
If you don't want to scroll initially but when the content overflow you want a scroll there then you can change overflow-x: scroll; to overflow-x: auto;
Solution 2: If you don't want to add scroll at all
If you don't want to have a scroll in any case then you can change overflow-x: scroll; to overflow-x: hidden;
See developers mode for reference.
You can add max-width:100vw; in your body.
This makes the maximum width of your body 100% of your screen size.
body{
max-width:100vw;
}
I am trying to enhance a react app where the app doesn't have scroll bars by default and it need to be configured when required. I am having difficulty in setting up scroll bar to a div.
<React.Fragment>
{/* HEADER POSITION FIXED */}
<Header />
<div className={classes.MainContainer}>
{/*OTHER COMPONENTS*/}
<LeadInsertForm></LeadInsertForm>
</div>
</React.Fragment>
I intend to set scroll bar to the MainContainer and was unable to do so. The .module.css file is as below:
.MainContainer {
margin-top: 99px;
font-size: 0.9rem;
height: auto;
overflow-y: auto;
overflow-x: auto;
}
By doing above I was unable to see any scroll bar and the content getting trimmed off and getting hidden below the view port. I tried different combinations as height: 100% but no use.
The output is as below:
Can you please point out where I am doing wrong? Thanks in advance
Try setting overflow-y: scroll in the css.
If it doesn't work, try overflow-y: scroll !important
This should override any pre-existing css conflicting with this element.
Is there a way to only enable scrollbar on the body only and disable on other divs?
This code disables all scrollbar in everywhere:
::-webkit-scrollbar {
display:none;
}
How to enable only on the body?
EDITED
Changing overflow is not the one I want. Let's say I want to create mobile friendly view editor, which able to scroll up and down inside the div content but the scrollbar should be hidden. The scrollbar in the body is necessary because I will have to edit the view from my desktop web browser.
Changing overflow will not help in this case.
These two CSS properties can be used to hide the scrollbars:
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
}
jsfiddle: http://jsfiddle.net/5GCsJ/954/
I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.
<html>
<body>
<div id="content">
<div id="mydiv"></div>
<div>
</body>
</html>
html and body have overflow-x:hidden.
Div "content" has nothing in the css and div "myDiv" has position absolute.
How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.
Fiddle > http://jsfiddle.net/o7dph6sj
Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.
Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.
Example:
body{
width: 1024px;
overflow-x: hidden;
}
Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.
Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:
html, body {
overflow-y: hidden;
}
to avoid HORIZONTAL SCROLLING:
html, body {
overflow-x: hidden;
}
to avoid BOTH
html, body {
overflow: hidden;
}
take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all
Change "overflow-x: hidden !important;" to be
html, body {
overflow: hidden !important;
}
or
html, body {
overflow-y: hidden !important;
}
In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"
And it works!!!
Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/
Updated the Answer with addition requirement:
You add "overflow: hidden" when you don't want both scrolls,
AND "overflow-y: hidden;" hides the Horizontal Scroll
AND "overflow-x: hidden;" hides the Vertical Scroll
Checkout the updated Fiddle and try on your by commenting and un-commenting this code:
html, body {
overflow-y: hidden; /* Hides Horizontal Scroll*/
/*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
/*overflow: hidden;*/ /* Hides Both Vertical and Horizontal Scroll*/
}
Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"
Checkout these articles >
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.
in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called #media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden
so I added max-width:100vh inside the body style, and voila. it works!
checkout my code:
body{
min-width: 0px;
max-width: 100vh;
position: absolute;
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0;
width: 40%;
top: 34px;
height: 100vh;
z-index: 1;
background-color: #194ca7;
}
I'm want to add a vertical scrollbar to a section of my webpage if its content grows too big but a grayed-out scrollbar shows up even when the content is small enough to fit. What do I need to change to make the scrollbar show only when its needed?
Example code:
<div id="aaa">
</div>
#aaa {
background-color: #eee;
width: 50px;
height: 100px;
overflow-y: scroll;
}
Result screenshot:
JSFiddle link with live example:
http://jsfiddle.net/PGwg3/
This will work
overflow-y:auto;
Change the property overflow-y: scroll to overflow-y: auto