I'am trying to implement a scrollbar and preventing content from moving when the scrollbar appear
i found a solution that make the page scrollable but the scrollbar is invisible
how can i make it visible in the page.
this is my first solution:
mat-sidenav-content{
width: -webkit-fill-available;
&::-webkit-scrollbar {
width: 0px;
}
}
You should add background:transparent;
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
}
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 page seems to be centered in all modern browsers except IE7. In CSS I have simply:
html, body {
width: 1000px;
margin: auto auto;
}
and it doesn't work.
Another issue for all browsers is that whole page slightly moves after clicking menu items. E.g. choosing second menu item causes thah page is shifted to the right compared to third page. Could you help me how to solve these problems. TIA
To fix the first issue, remove html from the selector:
body {
width: 1000px;
margin: auto auto;
}
The second issue is caused by there not always being a vertical scrollbar, which changes the width of the page and so causes a slight horizontal shift.
Fix it by adding this, which forces there to always be a vertical scrollbar:
html {
overflow-y: scroll
}
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }