In my application I have a scroll bar on my page. when I try to open the mat dialog box on that page I want the scroll bar white space to be hidden. And the mat-dialog should overlap that white space of background.
Could anyone suggest how can I achieve this
In my scss I already tried giving these properties but it's not working:
position : fixed;
z-index : 10000;
Related
I'm trying to make an a bit transparent navbar that is fixed to the top of the website. However, no matter what I try, when I scroll down the text doesn't stop before the navbar but continues behind it. I tried adding padding or margin to the body, or to the text itself, but when I scroll it still goes behind the navbar. Any idea how I can fix this behavior? I want it to stop right before the navbar, but I still wanna see a picture, which is supposed to be a static background, behind the navbar
I tried adding margin or padding to the body or the text field itself, but after scrolling down it still was visible behind the navbar. I also tried positioning it in absolute way, but it still didn't work.
I have a single web page that has an annoying visible scroll bar. I want to get rid of the scroll bar when the website is at full screen. I've tried using overflow-y:hidden; but the problem with that is when I try to resize the window the navbar pushes all the content down the web page and overflow-y:hidden; makes it impossible to scroll to view the content.
I'm not sure if it's something wrong with my background because I'm not using an image, just a gradient, and I don't want my navbar to overlay the website.
I have seen many sites using background image for their page but then i see the following code
background: url(...) no-repeat scroll center top transparent;
I couldn't understand the different property used after the url. I need to understand those properties.
i will explain property after image url
1- background repeat : you can disable repeat it with "no-repeat" option so it show once but if its small you have to put background color to fill the rest white spaces .. also you can repeat it horizontal only with "repeat-x" and vertical with "repeat-y"
2-scroll/fixed : it means your background image is scrolling with content till its end .. or you can use option "fixed" to sticky background and only scroll content/elements !
3-background-position : this option to position background in page .. first attribute for horizontal position you can set option "right" or "center" or "left" and next attribute is vertical position and you can use "top" or "center" or "bottom"
4- background color -> use transparent or specify color to fill the page behind background image so if the image is small and you set it to no-repeat the color will fill the rest spaces on web page !!
hope this make you understand :) and sorry for my english
now I have a simple custom pop-up box and its overlay background that covers all the web page behind it (height:100%, width:100%). my question is how can I make the scoll bar only scroll the pop-up box and its background not the page behind them.
Thanks. sorry for my english.
Try to add a css for the pop-up box
overflow:scroll; //for both vertical and horizontal bar
overflow-x:scroll; //for horizontal bar
overflow-y:scroll; //for vertical bar
Here, you can find some help
Example: http://jsfiddle.net/kdMRV/8/
Instructions: drag the drag item at the bottom onto the red content area. The red should change to yellow on successful hover.
Move drag item back to the bottom of the page
Now, scroll the scrollbar as far to the right as it can go. And now the issue arises: if you drag the drag item over the red it turns yellow as expected, but even if you drag the item to the white space to the left of the container div (the one with the scroll bars and overflow: scroll), the red still turns to yellow!
Note, I am using chrome to test this, but I think it happens in at least FF3.6 and IE8
Can someone explain why this happens and how to fix it?