When I open popup on my site from desktop, all right. But when I open popup on mobile devices, popup-overlay has double height (popup go to top of page).
Example of popup: http://jsfiddle.net/tb28F/
How can i fix it?
Update. Example of my problem: imgur.com/hKHjPzP
Try setting the height to the viewport height value, after adding the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And CSS:
.popup-overlay {
background: rgba(0,0,0,.5);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
text-align: center;
overflow: auto;
}
Related
Just now I ran into a weird probelm, I have a fixed element with height:100%. Everything works well until I open Chrome Dev Tool and enter the mobile debug mode.I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too.
I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
Here's an example of this happening:
<html>
<head>
<style>
#menu {
background-color: blue;
position: absolute;
height: 300px;
left: 0px;
width: 200px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Testing</title>
</head>
<body>
<div id="menu" class="max-width"></div>
</body>
<script>
var menu = document.getElementById("menu");
menu.addEventListener("click", function() {
menu.style.left = "200px";
});
</script>
</html>
If you click the menu div in mobile Safari (which should just move the div right 200px) it seems to cause the entire viewport to shrink. This doesn't seem to happen in other mobile browsers. You can test it here: http://natecollings.com/mobile-safari.html
Does anyone have a mobile Safari workaround for this?
Here's a gif of it happening:
Have you tried to force a min-width to be equal to the actual width and min-height to be equal to the actual height and try it out on safari on mobile? This might push the browser to use that height and width.
Something like:
#menu {
background-color: blue;
position: absolute;
float: left;
min-height: 300px;
left: 0px;
min-width: 200px;
}
position: fixed is a quirky little fellow especially when it comes to mobile.
When attempting to use a fixed element with another element that has a width greater than the device's height, it breaks Mobile Safari.
I would like to keep the header on top while the content is scrollable. Is there a way around this issue without losing the experience?
Thanks in advance!
EXAMPLE:
http://debug.studiotate.com/mobile-safari-position-fixed (this is the issue i'm seeing - the header goes away when you scroll down and/or right)
EXPECTED:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (this is what it should look like - the header stays put)
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
I think that div must be remove and set background to body
<body>
<header>Header</header>
</body>
And CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
www.regretproject.org is my site. I'm having a p problem in which the menu on the left side is cut off entirely on Android, and half way on mobile Safari. Any tricks to force it to see the whole thing?
www.regretproject.org/css/style.css for the css
Try this:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Well... you're positioning your content to the right...
#container {
position: absolute;
width: 1024px;
right: 0%;
height: 500px;
top: 60px;
}
... why do you do this? Is there a special purpose this position serves? I would recommend just centering your content instead of doing absolute positioning:
#container {
height: 500px;
width: 1024px;
margin: auto;
position: relative;
top: 60px;
}