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;
}
Related
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
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'm trying to make a div that stretches over the screen and that the user needs to click to dismiss. It works well on computer and Android phones but not on the lesser unit iPhone.
Here is the code:
.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>
It seems like its the overflow that isn't working. How can I fix this?
Since you're already using an absolute positioned element, I would disregard height and width entirely and stretch the image to the entirety of the page using positioning:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>
Going a step further, you likely want the overlay to not scroll away on longer pages. For this, use position:fixed. This only has the disadvantage of scrolling still being enabled; so if a user scrolls, the overlay will look correct, but once they click it away, they will end up in the middle of the page. Addressing this requires a JS solution that goes beyond the scope of this question.
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.
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/