I have used modal in my react.js website. But it's scroll event not working properly in safari browser. I have checked it all other browsers, It's working properly. In Safari when we scroll down it's merged all text fields.
I have given my modal following CSS properties.
position: fixed;
top: 64px;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
z-index: 99;
background: #fff;
I have tried to solve this issue to changing overflow property value, but nothing happens.
Any help on this issue is appreciable.
Thank you.
Related
Hello I have some issues with a code. I'm trying to do the following. When OPEN POPUP is clicked this will make popup visible and it will cover the whole screen. When X in content is clicked this will close the content and make it will make popup invisible again.
I have achieved this using :target pseudo-class.
You can see the demo here: https://codepen.io/loganlee/pen/Jjdjzom?editors=1100
I have two problems. First, OPEN POPUP link is visible on top of screen and it is not covered by .popup. Even though I've done width: 100vw and height: 100vh.
.popup
{
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(black, .8);
opacity: 0;
visibility: hidden;
padding: 10rem 0;
}
Second, .popup__content is taller than .popup when height of screen is made really small. You can see both in the picture.
I think I've done something wrong with layout. Thanks.
Add these style to your code.. for your two issues.
.popup {
top: 0px;
left: 0px;
overflow-y: auto;
}
I have a div class"selection-detail-container" and I am displaying it as an pop up window.
Css on div is
.selection-detail-container {
display: none;
position: absolute;
top: 30%;
left:10%;
z-index: 100;
width: 65%;
background-color:#003768;
border:1px solid #003768;
padding-bottom: 20px;
margin-bottom: -20px;
}
Now this div is opening properly in all browsers except Safari. On the iPad Air, on Safari, when you scroll away from the first page of content and click on any piece of tagged data, the window(div) opens off the screen/back at the top of the content/browser window. In order to see it, you have to scroll back up to the top of the document. This is not an issue on desktop environments.
Please help.
I have a empty div on my page that is centred and is filled with only a colour. When coding I am using firefox as my test browser. I had issues getting the div to appear and when I checked it in chrome it appeared no problem. Now it only appears in chrome. Im not sure if it is a simple extension that needs to be used or my code is wrong. My code and css is posted below. Any advise helps as this is getting a tad frustrating.
div.slider {
background-color:#78A9AD;
width: 15vw;
height: 25vw;
clear:left;
left: 0;
margin: auto;
margin-top:60px;
position: absolute;
top: 50%;
width: 100%;
}
HTML:
<div class="slider" >
</div>
EDIT: Tinkerbin example located in comments.
The issue I'm running into is with the fixed topbar going behind the slider (only one slide is in there now for testing). This is happening because the light green background used to outline the header is created using an :after pseudo-element on the .page-header class, like so (using SASS):
.page-header {
position: relative;
z-index: 0;
padding: 35px 0;
&:after {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 400px;
border-bottom: 5px solid $white;
z-index: -1;
}
}
This places the pseudo-element behind the header, but sill leaves it in front of the slider. I've positioned the slider relatively to place it in front of the pseudo-element, but I can't figure out for the life of me how to adjust so the topbar is always on top. Here the code for the topbar:
.nav-cont {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
height: 40px;
z-index: 9999;
}
Feel free to take a look at the demo site and let me know if you have any ideas. I've been going through Chris Coyier's references along with some others and just can't seem to muster up a solution.
Thanks in advance for anyone who might be able to take a look into this!
I figured it out.
.nav-cont is a child of the header, and because of the weird z-index necessities of the background, it is getting pulled under the slideshow. z-index is relative, so with a high z-index the navigation could only be the highest thing in the header, which was all under the slideshow.
Moving .nav-cont out of the header and giving it a high z-index solves this problem. Also, strictly speaking, semantically the navigation belongs in a <nav> element.
Fixed example
I am using fancybox to allow users to send messages to one another. I have a wierd issue where the fancybox's close button shows four times in google chrome but works just fine in firefox.
Here is the css for the button
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
Hmmn.. Seeing example page would help.
This shouldnt happen... but im going to throw in a guess that overflow: hidden; could help.
try adding:
background-repeat: no-repeat;
you might want to mess about with the width and height etc too