I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript). Iframe should be placed in bottom right corner. I can only control the style of an iframe.
I have created following demo page which demonstrates the problem in test host page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
On desktop browser this code works fine, but on (some) mobile devices the iframe is not visible on the screen. If I try to highlight an element its placed on gray area.
Why is happening this and how can I style an iframe so that will be placed on bottom right corner?
Edit: this is a screenshot from Galaxy S3 emulation (Chrome). Iframe is invisible in gray area. I think its the same on physical Nexus 5X device.
Many thanks!
1000px width had been given to #greeting , that's why the element out of your mobile width ,you can simply fix this like using media Queries. 992 width starting the portrait view of devices
#media (max-width:992px){
#greeting { width:100% !important; }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
Based from my investigation, the gray area that shows up in the chrome emulator is caused by the style of the paragraph html tag:
`<p id="greeting" style="width:1000px">Loading...</p>`
I believe the gray area shows up because you have a style of width:1000px in where the total size of the emulator, Galaxy S3 for example, only have a maximum width of 360px. But if you remove the width: 1000px style in the paragraph element, you can see that the frame is being properly shown in the bottom right corner of the screen.
You can check it with the sample below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width: 100px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
I didn't try this, but what if -- instead of setting the position as `bottom: 5%; right: 5% -- you calculate the position from the top left based on viewport width and viewport height. Something like:
top: calc(100vh - 200px);
left: calc(100vw - 200px);
See THIS DEMO IN YOUR MOBILE
Change:-
add following style to handle mobile browser
Reason:-
The mobile renders the html in mobile compatible mode which injects its own style to the higher width elements. thats why the page works in an unintended way in mobile compatible mode. if you handle it in your html itself, then it leaves the style of your page how you intended to view.
Thats why if you click Request desktop site in chrome setting your code itself works fine
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
<style>
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
</style>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px;
height: 200px; background: tranparent; border: 0px none; overflow: hidden; z-index: 1000000;right:
5%;"></iframe>
</body>
</html>
Related
I've run into an issue. I have a div absolute positioned and am hiding it off screen using a negative right value. This is fine on desktop browsers, but I'm finding on mobile safari that I can horizontally scroll and basically swipe the element into view.
I made a very simple version of what I'm attempting below:
<!doctype html>
<html class="no-js" lang="">
<!-- v3 -->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Block Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrapper {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.disrupt {
width: 300px;
height: 300px;
background: #000;
position: absolute;
top:0;
right: -150px;
}
</style>
</head>
<body >
<div class="wrapper">
<div class="disrupt">
</div>
</div>
</body>
</html>
In a desktop browser it works fine, in Safari and Chrome on an iPhone I'm able to scroll the hidden portion of the disrupt block into view. Chrome on android seems to work fine. Any ideas?
hi i have a problem with my google form format in my site that need to work with a resolution of 1280x800 , i´m using chrome console to see the resolution but the form height is creating a scroll bar at the side and i want to fit it to my resolution is any solution or fix?? it need to fit the 1280x800 format .txs
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd4pzJ9kRydc-UVkEkm9xKDZjF0S3Earn-Wjcbh8FEAlYnkXA/viewform?embedded=true" frameborder="0" marginheight="0">Loading...</iframe>
</div>
</body>
</html>
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;
}
I have this simple page layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
text-align: center;
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 50px;
background: url('http://tinyurl.com/o8w87av') 50% 0 no-repeat;
}
.outer {
width:960px;
height: 300px;
background: #dadada;
margin: 0 auto;
}
.footer {
width: 100%;
height: 50px;
background: #000;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer"></div>
<div class="footer"></div>
</body>
</html>
On desktop it works fine but on mobile or tablet no. I think that there is some problem with width: 100%; but I can't figure it out how to resolve it.
Some interesting things I find out:
I put this HTML+CSS code to jsfiddle (http://jsfiddle.net/STXmQ/) and there is same problem like on my mobile or table
But when I turn jsfiddle to fullscreen mode (http://jsfiddle.net/STXmQ/embedded/result/) on desktop it's ok and also on my mobile and table it's OK!!
Online version of my layout
Thank you very much for helping me!
SOLVED: Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.
Your outer div has an absolute width of 960px that’s why it’s wider on mobile than the other ones. Change its width to max-width and it should shrink to viewport width.
Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.