Scenario :
I am trying to use a mat-drawer like a modal sidesheet.
So when the drawer is open I don't want the user to be able to interact with anything outside of the sidesheet. This means that I don't want the user to be able to scroll the window when the sidesheet is open.
Is there a way to make it so that when the drawer is open scrolling is disabled and the scrollbar disappears?
Here is an example demonstrating the problem. Notice how when the drawer is open the page's scrollbar is still there and you can scroll the window as well as the drawer content.
How can I make this scrollbar disappear so that the user can only interact with the content of the drawer?
I have no idea why in the blazes does you div need to have a height of 2000 pixels, but anyways, here's a way to solve it.
On your app.component.css, add the following CSS properties overflow: auto and overscroll-behavior-y: contain to prevent the scrolling behaviour from 'escaping' your mat-drawer.
In a way, we can say that this creates a logical separation between the drawer's scrolling context and main application.
.drawer-content {
height: 100vh;
width: 300px;
background: orange;
overflow-y: auto;
padding-left: 20px;
overflow: auto;
overscroll-behavior-y: contain;
}
I have reproduced the demo over here. (I have left the other classes and CSS properties untouched.)
Related
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
I am trying to use drawer in ant design to display some content. I noticed that when the drawer's placement is left or right, the content can scroll up and down. But when the drawer's placement is top or bottom, the content cannot scroll.
Here is a simple example:
https://stackblitz.com/edit/ng-zorro-antd-start-7tkpcy
In this example, you can see it cannot scroll. But if change the nzPlacement to 'left', then scroll works well.
What's the problem behind of this? And how can I make the scroll work when nzPlacement is at the bottom.
Thanks.
I think that, they might forget to handle this scenario :
But you can solve that by :
.ant-drawer-content {
height: 100%;
overflow-y: scroll;
}
And also add encapsulation : ViewEncapsulation.None to reflect the above style in your component
WORKING DEMO
In my case i change the class:
.ant-drawer-body {
overflow-y: scroll;
}
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
Codepen
Hello,
I'm desperately looking for a simple solution to my problem, my code is available on codepen.
// line 84
.panel-group .panel-heading + .panel-collapse > .panel-body {
border: none;
max-height: 300px;
overflow-y: scroll;
}
The objective is to keep the pink footer always visible (pasted at the bottom of the screen), even if the content is too large (like the panel 3 when it is open).
I tried putting a vertical scroll when the content is too large, but I'm not sure how to use max-height in the best way (currently at 300px, line 84).
This solution does not really work, it is not suitable for those with large screens (because max-height: 300px ...).
Would it be possible to do what I want directly in CSS? If so, can you guide me?
Or Javascript is mandatory according to you? The background-gray of the panel must cover the whole area, down to the bottom, with any resolution.
Thanks !
In my opinion, you should break the footer out of the modal and display it separately because the modal is already a fixed element. You could hook into js modal events and display this standalone footer only when modal is opened.
.modal-footer.outer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
background: #fff;
}
http://codepen.io/anon/pen/XpbYeE
Your modal footer was being fixed, it actually was behaving properly, the problem is that it's still a child of another fixed item - the modal itself and thus gets detached when the viewport gets too small for the parent.
http://g.recordit.co/pyMEfO94wE.gif
.modal-body
{
overflow-y:scroll;
height:400px;
}
Your modal body can be made scroll-able to keep footer always visible.You can use any height you want.
http://puu.sh/4k57Z.png
When I open up a modal using bootstrap it unnecessarily brings up a slider bar on the side.
Is there anything in CSS that would be causing this?
How can I make it not do this?
CSS for the modal
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
display: none;
overflow: auto;
overflow-y: scroll;
}
When I open up a modal using bootstrap it unnecessarily brings up a
slider bar on the side. Is there anything in CSS that would be causing
this?
This: overflow-y: scroll;.
A value of scroll says to "show a scrollbar regardless of whether or not you need to do so".
This value [that is, scroll] indicates that the content is clipped and that if the user
agent uses a scrolling mechanism that is visible on the screen (such
as a scroll bar or a panner), that mechanism should be displayed for a
box whether or not any of its content is clipped. This avoids any
problem with scrollbars appearing and disappearing in a dynamic
environment.
Source
You can omit that property entirely and the preceding overflow:auto will cause a scrollbar if one is needed.