I've a full page fixed element to show 'This page is loading' gif image. But the page has contents which overflows the body. And user can scroll it over this fixed element. Is there a CSS way I can prevent this? I could have catch the event and stop it through JS. But a clean CSS way would be great.
.page-loading {
background: rgba($white, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: all 0.5s;
z-index: 14;
&__image {
height: 50px;
width: 50px;
}
}
I've refered this. But I want to control it from the component itself.(without JS)
As in the link you already provided, you have to apply overflow:hidden; to your body.
Related
I have created an angular component called toolbar and applied the following CSS to it.
position: fixed;
z-index: 999;
height: 100px;
I used position to fix my toolbar to the page whenever I scroll the page. I used z-index to display the toolbar over all other elements on the page.
This makes up for an individual element that I used in the app.component.html.
My problem is, when creating a page using a new component, if I navigate to said page, the 'newcomponent works!' does not show up because the toolbar overlaps it.
I wish to make my toolbar fixed in a way that if I had any new element, whatever element I display, it appears right under the toolbar instead of underneath it.
Thanks for your help!
What could help you is position: sticky; which is exactly what you're asking for.
Here is an example (you need to specify the position, for example top: 0 for position: sticky to take effect):
body, html {
margin: 0;
padding: 0;
}
.toolbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 999;
height: 100px;
width: 100%;
background: red;
opacity: 0.5;
}
.contents {
height: 5000px;
}
<div class="toolbar">xyz</div>
<div class="contents">
<div>contents</div>
</div>
I have a DOM that looks like this:
<body>
<div id="main">
<iframe id="content"></iframe>
</div>
<div id="overlayWrapper">
<div id="overlay"><--THIS IS EMPTY DIV--></div>
</div>
</body>
Where inside the main div I have some other stuff too, which are not very relevant here. Now, these divs have the following CSS classes.
#main {
width: 100%;
position: static;
z-index: 2;
overflow: hidden;
}
#content {
width: 100%;
height: 500px;
z-index: 3000; // This doesn't seem to help.
}
#overlayWrapper {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
position: fixed; // This seems to cause the problem?!
}
#overlay {
opacity: 1;
will-change: opacity;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
Now, this seems to work to some extend, as I see my overlay with the background-color value of rgba(0, 0, 0, 0.5) appearing on the screen.
The problematic part is that I cannot click on the stuff that are inside the iframe.
What I noticed is that this happens because of position: fixed style in the #overlayWrapper.
If I remove it, then I can click on the stuff from iframe but now the overlay is not visible any more.
Is it even possible to somehow keep the overlay but make the stuff on iframe clickable again?
I tried to add z-index: 3000; to iframe (i.e., to #content), but that doesn't seem to work.
Any ideas?
z-index only works on positioned elements. Which means the z-index that you applied to #content, which is the iframe, is not in effect.
#content {
position: relative;
z-index: 3000;
}
Here is the working jsfiddle.
PS: I added some links in #main to simulate the content you might have on your page.
It's because the z-index property of the div#main element should be placed before the the z-index of the div#overlayWrapper element.
Use position: relative on the <iframe> element because the z-index property gets in action with its relative.
#content {
width: 100%;
height: 500px;
/* This doesn't seem to help */
z-index: 3000;
position: relative;
}
I've used technique described by fcalderan here to prevent body scrolling, but allow overlay scrolling.
I've used first method which "works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility."
It works, however some of the body images are appearing on top of overlay(overlay is not working completely). Can't figure our what's the problem. Could you please help?
Here is codepen. I've included practically all page cause I don't know here the problem is. (Also on codepen the body background is still scrolling, but on local host it's working correctly)
To trigger pop-up click "POP-UP TRIGGER BLOCK"
CSS
.noscroll {
overflow: hidden;
}
.overlay {
position: fixed;
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0; }
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
Add the z-index property with some high enough value to the .overlay div, e.g.:
.overlay {
position: fixed;
overflow-y: scroll;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999999;
}
I have a little pseudo modal I am building for my app that takes over the screen for a moment when a user clicks the button. I have it set as position fixed so it can overtake the entire screen infront of the user. I have it show and hiding right now with just toggling between display: block and display: none, my css right now just looks like so :
(SCSS) :
.sort-fullscreen {
display: none;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
display: block;
}
}
And there is just a
<div class="sort-fullscreen">
... users content
</div>
Sitting at the bottom of my page.
So this works fine, however I am trying to figure out if there is a way to animate the position fixed coming onto the page - perhaps sliding on and off?
Initially - I tried something like this
.sort-fullscreen {
display: block;
top: 0;
left: -100%;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
left: 0%;
}
}
However, this does not seem to work for me. I cannot seem to find a clean way to animate a position fixed onto the page. Any help on how to achieve this would be appreciated. Thanks!
Your code seemed to work for me, albeit after adding 's' in your transition time:
transition: all 0.5s;
Fiddle: https://jsfiddle.net/dt2j6872/1/
I have setup a fiddle to reproduce this issue. Only in android native browser, the scroll is working for the element beneath absolute positioned element. It doesn't seem to respect the z-index for scrolling.
html, body {
height: 100%;
overflow: hidden;
}
#scroll {
height: 100%;
overflow: scroll;
}
.overlay {
height: 100%;
width: 100%;
background-color: #333;
opacity: .4;
position: absolute;
z-index: 4;
left: 0;
top: 0;
}
Code: http://jsfiddle.net/s4vPV/5/
Result: http://fiddle.jshell.net/s4vPV/5/show/
Give your #scroll div a position:relative, and set the z-index:3 or something less, so that the browser respects what is on top of what.
I made some minor changes to your CSS, which solved the issue you are running into:
On your #scroll element, you are not defining the positioning, but you are defining the position on your .overlay element with absolute. This, plus apply the z-index property with a value of 4 to the .overlay element causes the overlay to stack on top of the #scroll element. Since the overlay has a height and width of 100%, you are causing the #scroll element to become inaccessible, due to the .overlay element covering it entirely.
#scroll {
height: 100%;
overflow: scroll;
}
.overlay {
height: 100%;
width: 100%;
background-color: #333;
opacity: .4;
position: absolute;
z-index: 4;
left: 0;
top: 0;
}
Basically, if the browser were sheets of paper that were perfectly stacked upon one another, you wouldn't be able to read "access" at the bottom of the stack.
If you are trying to style your scroll bars, I would recommend looking into styling them directly. If not, all you have to do is place a position: relative on the #scroll and a z-index: 5; which will solve this issue.
Here is a jsfiddle with the solution: http://jsfiddle.net/dmidify/s4vPV/10/