I have an element which has the following css.
background: #ccc;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
I have tested the website on android 2.3 and it works fine, but when I load it on a device that runs 4.0, the element does not show up. I have inspect it with Adobe Edge Inspect(formerly Adobe Shadow) and it changes the background property to background:initial, I have tried overriding it with anything else but the inspector will go back to background:initial.
Is there Anything I can do to fix it or is this just a device bug? (it loads properly on mobile chrome)
EDIT: It only happens in one page, homepage
EDIT 2: Here is the html in question
menu
<h1 class="logo"><img title="" src="" alt=""/></h1>
<div class="social">
<ul>
<li class="rss" title="RSS">RSS</li>
<li class="twitter" title="Twitter">Twitter</li>
<li class="facebook" title="Facebook">Facebook</li>
<li>
<form action="" class="searchform" method="get">
<div class="searchform">
<label for="s" class="skip"></label>
<input type="text" id="s" value="" name="s" class="watermark" placeholder="search" />
<input type="submit" value="Search" class="searchsubmit" />
</div>
</form>
</li>
</ul>
</div>
</div> <!-- end #inner-header -->
<div class="navigation-container" id="main-navigation">
<nav role="navigation">
<ul id="menu-nav" class="">
<li id="menu-item-8" class=""><a href=""</li>
<li id="menu-item-17747" class=""></li>
<li id="menu-item-7" class=" menu-item-7"></li>
<li id="menu-item-6" class=""></li>
<li id="menu-item-5" class=""></li>
</ul>
<div class="social">
<ul>
<li>
<form action="" class="searchform" method="get">
<div class="searchform">
<label for="s" class="skip"></label>
<input type="text" id="s" value="" name="s" class="watermark" placeholder="search" />
<input type="submit" value="Search" class="searchsubmit" />
</div>
</form>
</li>
<li class="facebook" title="Facebook">Facebook</li>
<li class="twitter" title="Twitter">Twitter</li>
<li class="rss" title="RSS">RSS</li>
</ul>
</div>
</nav>
</div>
As you may or may not have noted, this is pard of a wordpress theme and this is placed in the header, so every page has this exact same header. For some reason, this only breaks on the homepage. Another note, I have removed a lot of identifying information so the links don't have urls and other things are missing but all the elements are there
Related
I am strucked into an issue where the collapsable bootstrap navbar extends full width and seems not to be responsive only on android mobile devices. It works fine on iphone. The site is http://tworingsmedia.com/clients/Cornwall/05/index.html
Here is the code:
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<img src="img/web-logo03.png" width="270" height="248" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
Try using the image size with rem units. Because the image is not responsive, the nav bar is not getting responsive. With rem units, it will be responsive and you can define the size of it as you wish with the responsiveness.
Should I use px or rem value units in my CSS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<img src="http://tworingsmedia.com/clients/Cornwall/05/img/web-logo03.png" width="100rem" height="90rem" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li>.....</li>
</ul>
</div>
</div>
</div>
</nav>
The webview doesn't understand what html height 100% means its just showing a blank page. However, in mobile browser it works perfectly fine. Can anyone help me? I've gone through a lot of suggestions but none of that worked. As you can see in the code, I've purposely set the html background color as red so that i can see if the html document is indeed on my webview. I don't see any red at all its just pure white.
It only works if i hard set the height and i don't want to do that. My code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
min-height:100%;
background-color:red;
position:relative;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
min-height: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color:red; /*#E9E9E9;*/
position:relative;
}
</style>
</head>
<body style="position:relative">
<div style="overflow-y:hidden" class="container-fluid login-container">
<div class="row" style="height:15%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:13%;">
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" style="height:5%;">
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" style="height:30%;">
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row" style="height:20%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:16%;">
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure your webview layout is configured properly:
android:layout_height="match_parent"
If you used wrap_content, the webview itself will shrink to zero so that only blank page is shown.
Showing red in IE and chrome, I could recommend instead of height: 100%; use height:100vh; as this will set the div to 100% of the view port height. a div tag will not automatically take the height of the view port, you must tell it to do so. also removed the following code as position:relative; is for Tgas not the . also removed the height styles from the row tags. you can set that in css but the height should set itself for each row.
html{
margin:0;
padding:0;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
background-color:red; /*#E9E9E9;*/
}
.cont-height {
height: 100vh;
}
<div class="container-fluid login-container cont-height">
<div class="row" >
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I had the same problem here:
Android WebView: how to let the css use the entire height w/ position absolute?
I answered my own question, problem was using alignParent instead of match_parent.
I hope that's the problem in your case.
In any case, try to put some borders to your WebView just to see where it actually stops.
I'm using bootstrap to make a responsive webapp.
I started doing some tests with a navbar and a form in my website, the problem is the navbar in android because is being rendered with full width (like a desktop view) and chrome (for android) shows a zoom and this is not the idea behind the responsive UI.
I also tried on my windows phone and it's rendering correctly, this happends with black berry mission tool for web develop wich emulates a tablet or mobile view.
So the problem now is android...
My code for the navbar is this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'vetpet.views.index.showIndex' %}">Vetpet Alpha</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Veterinarias <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="fa fa-plus" style="color:green"></span>Agregar Veterinaria</li>
<li><span class="fa fa-list " ></span>Listar</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Do you use the bootstrap basic template?
http://getbootstrap.com/getting-started/#template
If not, make sure you use the correct viewport settings. Have a look at this page:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Also keep in mind that css calculations are not available in androids default browser before 4.4. But you can use a workaround for this (box-sizing, positive padding, negative margin).
And in case you didn't know, you can use chrome to simulate webkit mobile devices. This also includes touch screen simulation, sensors and so on although it is not a perfect simulation:
https://developers.google.com/web/fundamentals/tools/test/emulator
I'm fighting against this bug over the weekend and I can't find a solution. My JQuery Mobile app has some switches. When testing on android 2.2 or 2.3 a strange bug happens: I scroll down a little to reach the switches then I trigger them with a swipe gesture and the page jumps to the bottom or even over the bottom. From then on it's not possible to scroll to the top of the page! Seems a like the scrollable area has redefined itself somehow.
I made a simple demo to show this behavior. Everything is out of the box. JQM, JQ, iScroll and iScrollview untouched and no own code.
Update
I just made an upgrade brunch on Github with JQM 1.3.2 - the switches are now working but a range slider doesen't ;/ Seems to be somethin with the slide event that triggers iscroll somehow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>iScroll Jumpbug Demo</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.2.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" data-theme="b" id="main">
<div data-role="header" data-id="persist" data-theme="b" data-position="fixed">
<h3>
iScroll Jumpbug Test
</h3>
</div>
<div data-role="content" data-iscroll="{"hScroll":false, "vScroll": true, "vScrollbar":false, "bounce":false, "snap": false, "momentum":false}" style="padding: 2,5%">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">
<a href="#" data-transition="slidefade">
Text
</a>
</li>
</ul>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="b">Testelement1</li>
<li data-theme="b">Testelement2</li>
<li data-theme="b">Testelement3</li>
</ul>
<div style="width:100%; height: 3em;"> </div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<p>
This demo shows a bug that occures using JQM 1.2 and iScroll 4 with iScrollview on Android 2.x Devices.
When you drag the page a little down and then use the second swipe trigger, the page jumps to the bottom
over the border and "stucks" there - it's not more possible to scroll to the top. Looks a like the scrollable area redefines itself.
</p>
<!-- Test Form -->
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="form_text">
Some Label
</label>
<textarea name="form_textarea" id="form_text" placeholder="Some fill element">
</textarea>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch1">
Switch me #1
</label>
<select name="form_mailinglist" id="toggleswitch1" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch2">
Switch me #2
</label>
<select name="form_mailinglist2" id="toggleswitch2" data-theme="" data-role="slider">
<option value="0">
no
</option>
<option value="1">
yes
</option>
</select>
</fieldset>
</div>
</form>
<!-- Linebreaks meant to make the scrollable area longer for testing purposes -->
<p>
<br/>
1
<br/>
2
<br/>
3
<br/>
4
<br/>
5
<br/>
6
<br/>
7
<br/>
8
<br/>
9
<br/>
10
<br/>
11
<br/>
12
<br/>
13
<br/>
14
<br/>
15
<br/>
16
<br/>
17
<br/>
18
<br/>
19
<br/>
20
<br/>
21
<br/>
22
<br/>
23
<br/>
24
<br/>
25
<br/>
26
<br/>
27
<br/>
28
<br/>
29
<br/>
30
</p>
<div> Wellcome to the bottom dude!</div>
</div> <!-- End of the content -->
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< Footer >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<div data-role="footer" data-id="persist" data-iconpos="top" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li>
Test
</li>
<li>
Test2
</li>
</ul>
</div>
</div>
<!-- <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
</div> <!-- End of the page -->
</body>
</html>
You can find the demo on GitHub:
https://github.com/Hexodus/iScroll_Jumpbug
There is even the apk file when you like to take a quick glance (your phone should be Android 2.2 or 2.3):
Or you can quickly install it via QR code:
By the way - I really can't replicate this bug on jsfiddle because it doesen't happen there. Jsfiddle is changing something so the page is not even shown correctly.
I badly need your assistance folks.
I have strange problem with native selectbox on Android devices - in the case of longer page like screen height and after click on selectbox - fixed toolbars hide.
Part of the code (original has approx. 7 selectboxes):
<div data-role="page" id="profile" class="whole_page">
<div data-role="header" data-tap-toggle="false" data-position="fixed">
<img src="img/logo.png" class="ui-btn-left header_image" /><h1>Title</h1>
</div>
<div data-role="content">
<label for="occupation">Povolanie:</label>
<select class="selecttmenu" name="occupation" id="occupation" data-theme="a" onchange="check_profile_form()">
<option value="0" data-placeholder="true"></option>
<option value="1">student</option>
<option value="2">employed</option>
<option value="3">unemployed</option>
</select>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="footer_border" data-id="myfooter">
<div data-role="navbar" class="navbarik">
<ul>
<li><img src="img/profile.png" class="footer_image" /><br /><span class="footer_text">profile</span></li>
<li class="last"><img src="img/logout.png" class="footer_image" /><br /><span class="footer_text">logout</span></li>
</ul>
</div>
</div>
</div>
Every answer will be appreciated. Thanks in advance.