Hello i have a cordova app and changed from UIWebView to WKWebview and the fixed footer moves when text overflows the view, the footer should work like in the first picture.
have tried everything i have seen, but nothing seems to work
#footer {
position: fixed;
bottom: 0;
background: #ffb81c;
color: white;
width: 100%;
text-align: center;
z-index: 999;
}
pictures
When moving one of our older apps to WKWebview, we found using the cordova-plugin-statusbar plugin in conjunction with adding the viewport-fit=cover attribute to the HTML viewport meta tag resolved our header and footer issues, which had an identical appearance to the example in your screenshot.
Example of the meta tag in the HTML5 <head> section:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover" />
We also appreciated being able to color match to our app's scheme in config.xml settings for the statusbar plugin, so would recommend use of this plugin anyway to improve the look of a Cordova app.
Related
I'm having an issue with my background stressing on iOS devices. It is stretching only when I have added content to a page like this. It loads correctly on empty pages like this. I read it has something to do with the adding background-attachment:scroll instead of background-size: cover. When adding it to the css, I don't get any changes. I must be using the wrong content id. Before I make a more images for a mobile theme, I'm wondering is it anyway I can fix it with code? Any help would be greatly appreciated.
The parallax effect was based on the notion that background images would remain in place with a fixed position while stretching to fit its container. Unfortunately CSS alone won’t let it happen.
Once you set an element to fixed positioning it is essentially removed from the DOM and relative to the window
section
{
position: fixed;
top: 0;
bottom: -72px;
background-image: url(http://bgImage);
background-size: cover;
background-attachment: fixed;
}
Try adding this code inside your html head tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
I am developing a web app and running into a problem on iOS: at the bottom of the page, when I scroll down further, the grey bar with the settings icon is moving up with the rest of the page, even though it's "position: fixed". I need it to stay in place.
This is NOT happening when the page is opened in Safari, only after adding it to the home screen and opening it from there.
I am using the following meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
The grey bar's CSS looks like this
#bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
align-items: stretch;
background-color: #222;
}
I have an iframe that I am embedding into a responsive WordPress theme. It looks good on some mobile devices, but on iPhone, the iframe is a bit wider than it should and it gets out of the container so users can't see the right part of the iframe (which is probably around 20-30px). This happens on portrait mode - if the orientation is set on landscape, it looks ok.
The content of the iframe is responsive as well, I'm using bootstrap. Also it looks ok on resized desktop browsers and on Android mobile devices. So the problem is only with the portrait iPhone orientation.
I am using this in the head of my iframe:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any ideas?
Thank you!
Mobile Safari seems to not recognize width attributes on iframe, but recognizes min-width.
iframe{
width: 1px;
min-width: 100%;
}
The problem is that mobile Safari ignores the iframe width attribute. I created a new question here and answered it myself with the solution: How to set the width of an iframe in iOS6?
For the meta tag try starting with:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't solve it, look for what's causing the frame to be too wide, e.g. iframe dimension settings, width, padding or margins of elements inside the iframe, as well as margins or padding on the WordPress div that contains the iframe.
Remember that the iframe content is a completely seperate document so you need to double check details in both the parent WordPress page and the iframe page.
Good luck!
edit
You could also check it's not a default browser setting by using a reset in your WordPress CSS, e.g.
iframe{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
I'm making a responsive website.
It is a wordpress website with a modified theme.
The theme has 5 stylesheets: max-479 px, max-767px,min-768px,min1024px
I already tested the website on the ipad and on the Nexus One(Android). And it works great!
However when i test it on an iphone 4S it causes a css bug on mobile safari and google chrome.
The css bug is that when viewing the site the user can still swipe sideways, even though i used the folowing css:
html
{
width:100%;
padding:0;
margin:0;
position:relative;
overflow-x:hidden!important;
}
body
{
padding:0;
margin:0;
max-width:100%;
position:relative;
overflow-x:hidden!important;
}
And i inserted this meta tag in the header.php
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
I checked if divs inside the content were overflowing in any way. But they weren't.
I am totally clueless what is left to do so it doesn't shift when the user swipes horizontally.
Link to the website: http://specialrequesthorns.com/
I appreciate you're help.
-- EDIT
Fixed the problem thanks to #ChrisHerbert and #mrbubbles.
It seemed that the sidebar had an ul that has a width of 120%, setting it to 100% solved the problem!
Regards,
Menno van Muilwijk
Just a guess - have you tried using the full meta?
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
I have a website which has elements outside the viewport, which I use for animations, they basically kick in , every time you scroll to a different section of the page.
The problem is you can scroll horizontally thus taking the website's content out of the viewport and having access to the element which shouldn't be seen (something like an element with {right:-660px;} which should be well out of sight till it's supposed to come into the viewport{right:100px} or something).
Have already tried
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
And
body,html{overflow-x:hidden!important}
I'm sure this is a problem which might have many losing sleep over, just like me.
Any help would be hugely appreciated.
As Mac's and on iOS, overflow-x:hidden on the body isn't as forgiving as it is on PCs. If you must have an element that has to appear offscreen, put it in a div that is not wider than the screen and has overflow:hidden on it.
E.g.
.overflow-div { max-width: 100%; position: relative; overflow: hidden; }
.my-animatable-element { position: absolute; right: -660px; }
<body>
<div class="overflow-div">
<div class="my-animatable-element"></div>
</div>
</body>
A link, or code, would really go a long way in helping you solve your problem.
Note: max-width:100% isn't necessary in my simplified example, but it might be in your specific case, which is why I put it in.
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow-x:hidden;
}
I had the same problem.
This is what worked for me:
div {
overflow:hidden;
}