In my web app I want to have a fixed div modal which occupies the whole screen, however this modal's scrollbar is not visible, instead only the body scrollbar is visible. I assume my fixed div scrollbar is right behind the body scrollbar, this makes it so I can only use arrow keys to navigate down while seeing the body scrollbar instead of fixed modal scrollbar.
.fixed_div{width:100vw; height:100vh; background-color:rgb(240,240,240); overflow-y:scroll !important; overflow-x:hidden; display:flex; flex-direction:column; position:fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:99999999999999999999999999999999999999999999999999999999999999999999 !important;}
.body{margin:0px 0px 0px 0px; background-color:white; position:relative; display:flex; flex-direction:column; max-width:100%; min-height:100%; height:auto; overflow-x:hidden;}
You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.
Related
My html,body, wrapper width is 100%. When I test this with responsive mode , Inside wrapper every element is well fit and responsive .
But the width of body and wrapper is not same. At the right side theres 40px extra space creating .
I have checked every block,element layout by giving border color. All block are fits inside the wrapper but the html and body not fitting with the same width of wrapper. I tried to prevent this with overflow-x: hidden but nothing has changed.
html,body{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Varela Round",Sans-serif;
font-size:1.125rem;
height: auto;
overflow-x:hidden;
}
.wrapper{
width:100%;
max-width:1348px;
overflow-x:hidden;
}
You must use viewport height in body
body{
height: 100vh;
width: 100vw;
}
and in your wrapper:
.wrapper{
width:100%;
max-width:1348px;
overflow-x:hidden;
}
I have 3 divs with scrollbar. if we move one scrollbar and it reaches end of scrolling area page also scrolls.
I want to fix this issue.
Fiddle for it. http://jsfiddle.net/78h8e88x/2/
html, body {
height: 100%;
position:relative;
}
body
{
line-height:100px;
text-align:center;
}
.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
overflow:auto;
}
.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
overflow:auto;
}
if we move one scrollbar and it reaches end of scrolling area page also scrolls.
The body element gets a margin of 8px by default (in Chrome at least). In the case of your fiddle this makes the content slightly bigger then the window and thus a scrollbar appears. Setting the margin to 0 on the body will remove this scrollbar. See jsfiddle: https://jsfiddle.net/vbvmLbmq/
That of course only fixes the scrolling behaviour in your fiddle which was a matter of window size. You can prevent scrolling on the html,body elements entirely by adding the overflow: hidden; css rule to them but keep in mind that would also hide any elements that flow past the height of those elements.
Continuing the scrolling of the page after a child elements scrolling has reached its end is browser application behaviour, which you cannot influence with javascript on your page.
Whats wrong with this?
CSS:
width:auto;
height:auto;
min-width:500px;
min-height:500px;
The width works and dynamically re-size to the window, but the height just gets set to the min-height.
JSFiddle DEMO
It has nothing to adjust to, you need to set
body,html{
height: 100%;
}
and change height to 100% instead of auto if you want it to take up the size
#div1 {
width:auto;
height:100%;
min-width:500px;
min-height:500px;
background-color:#F00;
}
I've been working on making a drop-down menu that has a max-height, and puts vertical scrollbars on the element if it exceeds it. For some reason, when this vertical scrollbar is added, the width does not automatically adjust to compensate for the width of the vertical scrollbar, and creates a horizontal one as well.
Here is a fiddle so you can see a simplified version of my problem. Anyone have a good solution (besides setting a width on it, because I want it to adjust to the content inside, and preferably no JavaScript)?
.wrapper { display:inline-block; max-height:200px; overflow-y:auto; background:#f00;}
.wrapper > a { display:inline-block; padding:20px; white-space:nowrap; }
You can use overflow-y:scroll.
.wrapper {
overflow-y:scroll;
overflow-x:hidden;
}
Fiddle: http://jsfiddle.net/4e00dp7w/2/
Note that overflow-x:hidden is not really needed, but just in case.
When the vertical scrollbar is added, it will take some space from inside the container, in this case .wrapper. To avoid this, you can add overflow-x: hidden to your .wrapper. class like this:
.wrapper {
display:inline-block;
max-height:200px;
overflow-y:auto;
background:#f00;
}
However, as i said, it takes space from inside the container, so your content may be overlayed by the scrollbar. A workaround to this problem is adding a little padding to your .wrapper class to compensate this space ocupied by the scrollbar.
.wrapper {
display:inline-block;
max-height:200px;
overflow-y:auto;
background:#f00;
overflow-x: hidden;
padding-right: 10px;
}
Working sample: http://jsfiddle.net/4e00dp7w/7/
I would set...
.wrapper{
overflow-x:hidden;
overflow-y:auto;
}
that way a scroll bar will only show if the inner content is taller than the wrapper.
I'm creating image slider, it's contains in big, 100% x 100%, absolute positioning popup div. And I need to block body scroll when slider is active. I tried overflow: hidden for body tag, in js - and it's not working, thereon I tried it in style.css, result was the same.
body {
position: relative;
overflow: hidden;
display: block;
}
So how to lock scroll for all page by css resources?
Use fixed positioning on your image
#myImage
{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}