I'm trying to work out why my WebView app insists on keeping the margin on body. Here is my CSS:
* {
margin: 0; padding: 0;
}
body, html {
margin: 0; padding: 0;
}
iframe {
border: 0px
}
body {
overflow: hidden;
margin:0px;
}
...and here is what I see: (the top and left both have a visible 8px margin around it)
..and here is what I see in the DOM:
I'm baffled as to why its showing margin: 8px, even when I've specifically told it NOT to have a margin on *, body and html.
I must be missing something silly - but I can't for the life of me find it.
Interestingly, if I check the page via a browser, the margins are fine:
It literally seems to be an issue with Android's WebView, verses a general CSS cross browser issue.
Ok, well I would never have thought of this to start with. The problem seemed to be with the fact that Android/PhoneGap/whatever, didn't like the fact I was using an inline style:
<style>
...
</style>
Instead, it wanted me to put all the CSS into a proper .css file, and then link it via:
<link rel="stylesheet" type="text/css" href="./css/style.css">
What a waste of my time - but at least its working now!
Related
I'm writing a game that requires fullscreen mode in a browser. I'm using various divs, makding sure they add up to a total of 100vh. When viewing the page in Chrome on Android, the bottom of the page is not visible. This is known feature. When the user scrolls up, the location bar and tabs at the top disappear and the whole page becomes visible.
Unfortunately, when going to fullscreen mode, the bottom of the page is hidden again. This is bad, as the user cannot scroll up. Consider the following example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body {
border: 0;
padding: 0;
margin: 0;
background-color: #fc9;
width: 100vw;
height: 100vh;
overflow: hidden;
}
div.fullscreen {
border: 0;
padding: 0;
margin: 0;
background-color: #446;
color: #fc9;
position: absolute;
width: 98vw;
height: 98vh;
left: 1vw;
top: 1vh;
line-height: 9.8vh;
}
</style>
<script type="text/javascript">
//<!--
function goFullScreen()
{
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.documentElement.msRequestFullScreen) {
document.documentElement.msRequestFullScreen();
}
}
//-->
</script>
</head>
<body>
<div class="fullscreen" onclick="goFullScreen()">
--- 0<br/>--- 1<br/>--- 2<br/>--- 3<br/>--- 4<br/>--- 5<br/>--- 6<br/>--- 7<br/>--- 8<br/>--- 9<br/>
</div>
</body>
</html>
Viewing this should give me a page with an orange border all around and I should see the numbers 0-9. Clicking in the middle will make it go to fullscreen, and look the same. This works with every browser and device I tested (Firefox, Chrome, Internet Explorer, Konqueror, Dolphin, on Windows, Linux, Android) except Chrome on Android. It also works with Chrome on a desktop PC and with Dolphin on Android. My questions:
Is there a way to make Chrome on Android work like all the other browswer/device combinations? Am I missing anything?
If not, this means I have to query browser and device in the code and adjust the size differently if we're in Chrome/Android. Do you know whether other browser/device combinations show the same behaviour?
This is related to this question, but I'm happy with answers that just list other devices or that confirm this only affects Chrome/Android.
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
Short and painless, I've tried many ways to get an element, e.g. info text, absolutely centered (H/V) without using divs, Javascript, jQuery or whatsoever.
The problem is not getting this to work and there are many different ways, but I'm losing my hair trying to get it cross-browser-compatible.
And it should be so simple.
For example, in the following scenario, FF21 interprets a margin-top of 50% as 100% for no logical reason. (Mobile devices don't, though).
I'm using <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
Relevant CSS:
body {
margin: 50% 0 0;
padding: 0;
border: 0;
display: block;
vertical-align: middle; /* removing this made no real difference at all */
font-family: Helvetica, Arial, MS Sans Serif;
font-size: 11pt;
text-align:center;
background-color: rgb(10, 50, 100);
color: #ddd;
}
Notes:
In Firefox, the expected vertical centering is set with a margin-top of 25% (which looks wrong in mobile browsers, then again).
Using HTML5
Trying to AVOID any form of script and precalculated, negative margins. The browser is supposed to center properly, as you request it to.
JS-Fiddle: http://jsfiddle.net/sfaVg/
Without an element containing the text, i doubt you will be able to position it dead center like you wish. Once you write proper markup (put the paragraph in a <p> where it belongs, for instance) it is quite possible though, with the following css;
p {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Also make sure its container (body in your case) gets display: table; and 100% width/height
Demo at http://jsfiddle.net/sfaVg/3/
Also, a bonus alternative method (requires two containers) can be found at http://zoffix.com/new/absolute-center-random-width-height.html
A third solution, for when you know the dimensions of what you're centering: http://reisio.com/examples/deadcenter/
I'm trying to make my blogs readable on an android browser, but it always ends up needing to scroll horizontally. Right now, my solution is working in chrome so that when I resize the window to a width smaller than the article content the article will shrink with it without a horizontal scrollbar. You can see an example of a blog article here.
If I do this:
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; minimum-scale=1.0; user-scalable=yes;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
</head>
<body>
<div id="container">Content goes here.</div>
</body>
then it works as seen here, but something else in my page is messing things up. In chrome, I'm getting the effect I want, but when I open the page on an android browser I have to scroll horizontally.
Edit: I traced this down to the facebook iframe. Anyway to get around this?
I have the same issue occasionally where android completely ignores overflow command. I think the first issue is using overflow hidden on the body, and not an internal element.
I would change:
<style type="text/css">
body {
overflow: hidden;
margin: 0;
}
#container {
max-width: 650px;
margin: auto;
}
</style>
To this:
<style type="text/css">
body {
margin: 0;
}
#container {
overflow: hidden;
max-width: 650px;
margin: auto;
}
</style>
Be careful what goes into the actual "#container" div. While it will probably display off screen, I was never able to fix a bug with object tags (flash video players). Over flow is a pain for mobile. If possible, I would develop fluid and go from there. No real need to set a max-width in that case -- and it will allow the user to browse the website as they want.
I've got a web page with some text inputs. The Android browser (at least on Android 2.3.4 which is all I've got now) seems to overlay its own control over the input on the page on focus.
The problem is that the overlaid control is a white rectangle and it looks ugly. Is there a way to disable it, or style it somehow?
UPDATE:
Here is an example from the Android emulator:
The rounded corners and the background are lost. On the actual device, I don't even see a border around the control.
I should probably mention that I'm using jQuery Mobile. My test device is an HTC Evo 4G.
Related questions:
Input has different style on focus
Input-Elements in WebViews always have the same style if highlighted on HTC Devices
Finally, I solved this problem for Android 2.3 devices.
It is not possible to really remove the overlay, but it is possible to move the overlay outside the viewport.
The overlay tries to position itself to the same position as the input field.
It copies the width and the position offset which you assign with
position:relative
and
top:-10000px
But the overlay does not copy the position offsets which are assigned through
-webkit-transform: translate3d()
This causes several issues with JS libraries like iScroll.
But this also helps us to hide the overlay:
input[type="password"], input[type="text"]{
position:relative;
top:-10000px;
-webkit-transform: translate3d(0, 10000px, 0);
}
You place the input field outside the viewport. Overlay positions itself beside it. Now you use translate3d() for moving it to the old position.
We use this solution already in our mobile web framework "qooxdoo Mobile":
http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform
Following code will remove tap highlight - [Android 4.0.3]
input{
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
}
Not sure this is a working solution and answer, but my inputs started playing along on Android after commenting out these, which all created havoc on my Android (HTC2.3) text inputs and selects
/* really bad */
-webkit-backface-visibility: hidden;
/* your normal bad */
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
If you want to style default inputs, I'm using these:
/* native placeholder styling */
::-webkit-input-placeholder {
color:#555555;
}
:-moz-placeholder {
color:#555555;
}
.inField label {
color:#555555;
cursor: text;
}
After commenting out the first webkits, Android is working ok for me. I'm overriding plenty of other stuff, too though.
Also check out the screenshot below:
What I did with my inputs is create a listview, put all my inputs into list items and strip all input-JQM-CSS. This should give you a transparent input sitting on top of a listview item, which I think looks really good. You can also add labels to the inputs, my example is set up to work with the inField label plugin, so you have all these classes on board already, too.
The screenshot is from my Android HTC 2.3.5 and shows an input type="search". It's a listview search filter, which I stripped of most JQM-css. I have removed it from the listview further down, placed it into my form-list, added a label (can't see if active) and stripped all CSS, including icons.
Here is an example of how I'm doing my list-forms:
<ul data-role="listview" data-inset="true" class="inputList">
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item">item</label>
<input type="text" name="item" id="item" />
</div></div>
</li>
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item2">item2</label>
<input type="text" name="item2" id="item2" />
</div></div>
</li>
</ul>
CSS:
.inputList li div.ui-btn-inner {
background: none;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
}
.inputList label {
margin: 3px 0 0 !important;
}
// styling of text inputs!
.inputList input.ui-input-text, .inputList textarea.ui-input-text {
width: 93%;
margin-left: 1%;
padding: 0.6em 0;
text-indent: 80px; /* hard-coded - doesn't work on Android */
border-width: 0px;
background: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius:0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
padding: 0px !important;
}
// labels, from inField label plugin, but not active
.inField {
position:relative
}
.inField label {
line-height: 2.25em;
vertical-align: middle;
position:absolute;
left:8pt;
width: inherit !important;
}
I hope this is all CSS. If you are trying to set this up and it looks crummy, let me know.
Working like this looks very nice on my HTC 2.3.4 My CSS still needs some polishing. I need to decrease the inputs width and align: center, so the borders of the below list item stay visible.
Other than that this would be a nice solution to crummy Android inputs. Just strip all JQM-CSS and put a listview-li behind.
Here is my code:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
I'm just taking a guess here, and you've probably already tried, but
-webkit-appearance: none;
may do the trick. I've not even got an android device, but on iphone that sorts out most input related styling problems as it strips out the default browser applied styling completely. Worth a shot anyway!
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline-style: none;
This will working fine in Android 4.0 but when you use this code for numeric Input field doesn't support bcoz of read-write-plaintext-only, i got this problem, please anyone suggest.
#czuendorf, May 13 at 13:53:
Worked for me too (also Android 4.0).
However... if you use an input with type="number" then the numeric keyboard does not pop-up anymore when you enter the field, but the regular keyboard is shown instead.
If you remove -webkit-user-modify, then the right keyboard is shown again, but the input element is shown with a border while it is being edited.
In my case the input overlay messed up the layout (moved some content down and right), but this does not happen anymore with this new css code.
I confirm the macnerd analysis of the czuendorf patch. These behaviors vary widely from one android version to another. I tested it on a real Htc device with android 4.0.3 and the outline disappeared (great!) but it opens some serious keyboard issues (I see that the single keypress is not shown in the field, and other strange behaviors...). In the emulator no keyboard issue occur. I've not found any solution for the real device. It's a shame!