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;
}
Related
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.)
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%;
}
My question pertains to framework7 implementation, but is basically a CSS question:
I have tabs under a popover. I need to make these tabs content vertically scrollable. The default implementation of tabs has scrolling enables, but when these tabs are placed under popover (modal if you like) then these tabs stop being scrollable.
I have made a basic fiddle, to better explain the issue. In the fiddle, if you click "Click Me" and then go to "Account" tab you will notice that the tab is not scrollable.
THanks
There you go, fixed: https://jsfiddle.net/xbvqksu8/3/
This CSS was added:
.popover-inner {
max-height:100vh !important;
}
.list-block ul {
overflow-Y:auto;
}
If you want your menu to fit in the screen better change the 100vh to something lower. Good luck!
#Fausto NA is great.
There is a little problem because the popover has top margin (usual 8px).
Therefore something like that is needed:
.popover-inner {
max-height: calc(100vh - 8px) !important; // last fallback
max-height: -webkit-fill-available !important; // fallback: supported by many webviews
max-height: stretch !important; // still not widely supported
}
References: Can I use Intrinsic & Extrinsic Sizing
I am kind of a beginner in css and I have tried to see if I can find a solutions for my problem with getting my content not to show under my transparent header when there is a need to scroll. I have checked the following post but I can't make this work. I would be extreamly happy if I could get some guiding into this if possible. I attached a visual of my problem if it is of any help. www is www.portaponte.com Thanks in advance!
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Well, Although not perfect, I'll go with an answer:
The problem with this solution is that scrolling will work only when hovering the scrollable content, meaning that you wont be able to scroll if your mouse is outside the big text container. That being said, thats what I thought you could do:
First of all, wrap the #casing div in a #casing-wrapper div, getting something like this:
<div id="casing-wrapper">
<div id="casing">
lots of content here...
</div>
</div>
Then you'll need to style this new div this way:
#casing-wrapper {
width: 800px;
position: fixed;
left: 50%;
margin-left: -400px;
top: 90px;
overflow-y: scroll;
}
Also you'll need to add some jQuery to set #casing-wrapper's height depending on window's height:
jQuery(document).ready(function(){
setWrapperHeight();
jQuery(window).resize(function(){
setWrapperHeight();
});
});
function setWrapperHeight() {
var height = jQuery(window).height();
var margin = 90;
jQuery("#casing-wrapper").css({"height":height - margin});
}
And that's all. Doing this, we created a new layer containing the scrollable content that has the window's height minus 90px. Those 90px come from your header's height plus it's top margin. Since the wrapper has position: fixed, it won't move on scroll, but it's content will. On top of that, with the overflow-y: hidden; property we clip any overflowing content, resulting in the text not being visible under your header.
Anyway, in my opinion the result of letting the letters go under the header is cool, and I won't change it :P
I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{
overflow-x: hidden;
}
Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.
Try using the following code snippet. This should solve your issue.
body, html {
overflow-x: hidden;
overflow-y: auto;
}
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype