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.
Related
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 make the horizontal scroll bar hidden so that the user cannot scroll . I have read somewhere that my body tag should contain a width of 100% and to set overflow-x:hidden but the following code but I can still scroll a bit on my mobile media query as shown below:
html, body {
background-color: silver;
height: 400%;
width: 100%;
overflow-x:hidden;
}
enter image description here
Check the example below, I've set the div width to be higher than my window and in the body tag, I remove the scroll using an overflow-x: hidden.
Since I don't have access to your source I can't help much.
HTML
<body>
<div class="scroll">
<p>Hi</p>
</div>
</body>
CSS
body {
overflow-x: hidden;
}
.scroll {
min-height:800px;
min-width: 1000px;
}
Working example: FiddleJs Example, note that if you remove the overflow-y the horizontal bar will show up. Maybe you're overwriting the overflow, try to mark it as:
overflow-y: hidden !important
Or open your console and debug in there.
My website works on a 15 inch laptop, but whenever I resize the browser, some of the information on my website 'disappears', as I am unable to scroll (scrollbar won't appear).
I'm experiencing this problem for two of my websites (they're part of a school project).
On the first website, the sticky footer covers the content when the website is being viewed in a smaller browser window. I managed to get a scrollbar for the container part (everything except for the header and footer), but I need the scrollbar to appear on the very right side of the website, outside of the container. (only the footer will be fixed, the header will be scroll-able as well).
http://sophisticateddesign.nl/cfreport/index.html
On the second website, I need the header and butterfly to stay fixed and for everything else to be scroll-able.
http://sophisticateddesign.nl
I'm wondering if there's an easy solution as I don't have much time left for these websites to finish..
Remove overflow: hidden in html
html {
height: 100%;
margin: auto;
width: 960px;
}
Remove position: absolute for .Wrapper
For second site:
You added your main content inside header with position: fixed; height: 50px;. It's the problem.
Yeah I just tried this out if you need something to overflow the sides you should use
html{
overflow-x: hidden;
}
instead of using just overflow.
|| For anyone who encounters this problem in the future. ||
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
Try changing overflow to overflow: scroll
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar
In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.
<body>
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}
#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}
#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.
How to make the <body> to adjust itself when the scroll bar appears?
Thanks!
The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:
html { overflow-y: scroll; }
if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.
However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)
i belive you should specify WIDTH css attribute for BODY class:
body {
width:100%;
}
<body style="height:100%; width:100%; overflow:auto;">
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/
Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.
When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.
The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.
min-height: ... px/em/%
max-height: ... px/em/%
So you will write in your case:
min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;
This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.
My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp
PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.