html + css not rendering properly in android phonegap - android

I am developing the android apps in phonegap but in that my html not showing properly on android phone. problem is that i have four div's first div showing the canvas which is width and heigh is 100% , second div showing the header and third div showing the text data which is coming from server and last is div is for contact form but what happen if content of the third div is increases then it showing content from the middle but i want to show the page from top. please see the below image. following is the my html and css which is working properly on browser but not working properly on real device and i am also uploading screen shot. Please help me find out this bug.
html
<div id="page">
<div id="wrapper" style="display: none">
<div id="header">
<div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
</div>
<div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
</div>
<div class="designtech-clear"></div>
<div class="course_info_div" id="courseInfo">
//dynamic content name , branch, duration and desc
<p class="pclass">Course name : <span> Catia & 3D Max</span> </p>
<p class="pclass">Branch name :<span> Pune</span> </p>
<p class="pclass">course duration :<span> 6 Months</span> </p>
<p class="pclass">Description : <span> Details</span> </p>
</div>
<div class="designtech-clear"></div>
<div class="contact">
<form id="contact-form" method="post">
<h3>Enquiry form</h3>
<div>
<label>
<span>Name: (required)</span>
<input placeholder="Please enter your name" type="text" id="name" >
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input placeholder="Please enter your email address" type="email" id="email-id" >
</label>
</div>
<div>
<label>
<span>Telephone: (required)</span>
<input placeholder="Please enter your number" type="tel" id="contact" >
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
</label>
</div>
<div class="center">
<button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
<img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
</div>
</form>
</div>
</div>
</div>
css
#page{
width:100%!important;
height:100%;
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}
#header {
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
min-height:45px;
color: #eee;
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.course_info_div
{
position:relative;
top:45px;
background:#BCB9B9;
padding: 12px 10px 20px 10px;
font-weight:bold;
font:16px;
text-align: justify;
}
.course_info_div p.pclass{
font-weight:bold;
padding: 5px 0;
}
.contact{
width:100%;
margin:0 auto;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding: 10px 30px 0px 10px;
position: relative;
}
below image showing the two views. left side view which is I want and right side view is on real device and emulator.


Pardon if this is way off but have you tried calling an location.href to an anchor point on the page after the server data has been received? I'm curious if that would work. So something like:
HTML:
<div id="courseInfo">
<a name="courseInfo"></a>
<p class="pclass">Course name : <span>
<!-- ...etc -->
</div>
Javascript:
function refreshUIAfterServerData(){
document.location.href = 'index.html#courseInfoAnchor';
}
Clearly this doesn't get to why the issue is occurring - but honestly after dealing w/Android PhoneGap stuff myself for a while now - I've given up asking why on many things and just do what I have to to get in and out fast as I can!

Related

How do I prevent the android keyboard push my container up?

So I'm doing a website with a "Modal Popup" login form responsive to mobile first and I have a footer to the end of the modal container. The problem is when I want to write something in both inputs, the keyboard appears and it push the footer up. I want the footer to stay in the position and the keyboard just don't resize my modal container or have interaction with the website.
This is how it look without showing the keyboard
And this is when it push the footer up.
Here's the code.
* {
margin:0;
padding:0;
}
header{
background-color:red;
width:100%;
height:30px;
display:flex;
justify-content: center;
align-items: center;
}
.to-modal-container{
background-color:blue;
width:100%;
height:200px;
display:flex;
justify-content: center;
align-items: center;
}
.to-modal{
background:red;
}
.bg-modal{
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, .5);
position:absolute;
top: 0;
display:flex;
justify-content: center;
align-items: center;
}
.modal-content{
width:90%;
height:50%;
background-color: white;
border-radius: 4px;
text-align: center;
padding-top: 20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
input {
width:50%;
display: block;
margin:15px auto;
}
<!DOCTYPE html>
<html>
<head>
<title>MODAL TESTING</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<header>
<div>
<span>LOGO</span>
</div>
</header>
<div class="to-modal-container">
<div class="to-modal">
<span>CLICK AQUI</span>
</div>
</div>
<div class="bg-modal">
<div class="modal-content">
<span>LOGO</span>
<div class="form-container">
<form action="">
<input type="text" placeholder="Name">
<input type="Password" placeholder="Password">
Submit
</form>
</div>
<div class="footer-container">
<span>THIS IS THE FOOTER</span>
</div>
</div>
</div>
</body>
</html>

I played around with the code you have shared and noticed that you have set the Height of modal-content to 90%.
So it re-adjusts the height of your Modal to 90% of the screen height available which changes when the keyboard is open.
So my recommendation is to set a fixed height like 300px instead of % and have a different height for mobile devices using media-queries.
.modal-content{
width:90%;
/* height:50%; */
height: 300px;
background-color: white;
border-radius: 4px;
text-align: center;
padding-top: 20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
Let me know if you need any more clarification.

Different versions of android, different display

I have created a mobile application using ionic framework. It consist of many html pages. For android version KitKat, the pages are displaying correctly. For android version Jellybean, the pages are displaying differently. Please see the html &css code?
Login.html
<ion-view hide-nav-bar="true ">
<ion-content scroll="false">
<div class="row" style="padding:29px">
<div class="col">
<div class="text-center">
<h1 class="text-font-white">Welcome</h1>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="line-white"></div>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" placeholder="{{user}}">
</input>
</div>
</div>
<div class="row">
<div class="col">
<input class="input" type="password" placeholder="{{password}}">
</input>
</div>
</div>
<div class="row" style="padding:30px 0">
<div class="col">
<button type=submit id="login-btn" ng-click="doLogin()"></button>
</div>
</div>
<div class="row" style="padding:2px 0">
<div class="col">
<button type=submit class="btn-white" ng-click="openRegistration()">Register your account</button>
</div>
</div>
<div class="row" style="padding:34px 0">
<div class="col">
<div class="item item-image" id="logo">
<img src="img/logo.png">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="text-center">
<h4>Forgot password?
<span><a href="#/forgetpwd" style="text-decoration:none;color:white">
Recover it</a></span>
</h4>
</div>
</div>
</div>
</ion-content>
</ion-view>
style.css [I have included styles that is related to Log.html page]
ion-view {
background-image: url("../img/bg.png") !important;
background-repeat: no-repeat;
background-size: cover
}
.text-font-white {
color: white;
}
.text-font-white {
color: white;
}
.line-white {
width: 100%;
background-image: url("../img/title_line_white.png");
background-position: center;
background-repeat: no-repeat;
height: 20px
}
.input {
width: 97%;
background: white;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 4px;
font-family: 'Lato-Black';
}
#login-btn {
width: 97%;
background: transparent;
border-radius: 20px;
border: 2px solid rgba(256, 256, 256, .4);
padding: 14px;
background-image: url("../img/icon_key.png");
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
}
#logo {
background-color: transparent;
border-width: 0
}
Different versions of android shows design differently, how to solve the problem?

Different Android versions have different WebView, with different support for html/css. For example svg is only partially supported before android 4.4.
Unfortunately only from Android 4.4 it's possible to remote debug your application with Chrome.
Check manually what css properties are failing across different Android version, then try to find a workaround (search and ask here).

Visit below link, you can get more ideas about Android Screen Sizes from it:
http://developer.android.com/guide/practices/screens_support.html

Android Browser ignores position:absolute

I'm developing a mobile website for kids, but I'm struggling with android tablets. Problem being is, that the footer is not docked to the bottom.
This is the website on any browser (Desktop) and iPad:
and this is the website on our android device (Android 4.2.2):
HTML snippet:
<div id="wrapper" class="... stuff ...">
<div class="center">
<div id="content">
... content stuff omitted ...
<footer id="footer">
<img src="img/bg.svg" alt="" width="100%"> <!-- Footer image -->
<img src="img/marienkaefer.png" alt="marienkaefer" id="marienkaefer" width="26"> <!-- Flying ladybug relative to the footer -->
<img src="img/schmetterling.png" alt="schmetterling" id="schmetterling" width="20"> <!-- Flying butterfly relative to the footer -->
</footer>
</div>
</div>
</div>
The CSS snippet:
#wrapper {
width:100%;
height:100%;
min-width:1024px;
display:table;
}
.center{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
#content{
width:1024px;
height:652px;
margin:0 auto;
position:relative;
z-index:20;
overflow:hidden;
background: url(../img/blurBG.jpg) no-repeat 100% 100% / cover transparent;
}
#footer{
width: 100%;
position: absolute;
bottom: 0;
}
#footer img{
float:left;
}
Any suggestions why this won't work on android?

Galaxy S4 stock browser css positioning

I am testing a page with a sticky footer. On the GS4 stock browser ONLY (not visible on android chrom), I get the sticky footer floating up and down the page as I scroll up and down. The footer also seems to have a stutter-looking effect. I've tested the same page on iphone 5 and gs3. This is my CSS flow:
.bar {
background-color: #F7F7F7;
overflow: hidden;
position: relative;
font-size: 13px;
}
.bar .footer-icon-holder {
padding: 5px;
display: inline-block;
width: 5em;
}
.bar .footer-holder {
width: 100%;
text-align: center;
margin: 0 auto;
height: 54px;
background-color: #FFF;
bottom:0;
-webkit-backface-visibility: hidden;
position: fixed;
}
and the footer html:
<div class="footer" ng-controller='footerController'>
<div id = "footer" class="bar">
<div style="margin:0 auto;">
<div class="footer-holder">
<div class="footer-icon-holder" ng-click="clickPic('home')" >
<div ng-show="homeSelected">
<img ng-src={{imageOnHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
<div ng-hide="homeSelected">
<img ng-src={{imageOffHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
</div>
</div>
</div>
</div>

jQuery Mobile - button style - Padding issue

Please see the photo below to understand the problem:
I have a problem with padding here. I cant place the text of the button "Online Map" in the middle of the button. I'm developing this application for Android.
HTML:
<div class="footer" data-tap-toggle="false">
<div class="wrapper">
<div class="ui-grid-b">
<div class="ui-block-a">Back</div>
<div class="ui-block-b">
<a data-theme="my-site" data-role="button" data-mini="true" onClick="checkReachability()">Online Map</a>
</div>
<div class="ui-block-c home">Home</div>
</div>
</div>
</div>
CSS:
.ui-btn-up-my-site {
color: white;
font-size:8px;
padding-top:0;
padding-left:0 !important;
border:1px solid #333;
text-align:left !important;
padding-right:0;
margin-top:-10px ;
white-space: normal;
}
.footer .ui-grid-b .ui-block-a, .footer .ui-grid-b .ui-block-c { width: 20%; }
.footer .ui-grid-b .ui-block-b { width: 60%; text-align: center; padding:0;}
I spent over 5 hours trying to style this button and still didn't succeed. It driving me nuts..
Can anyone help me?

You can try setting
margin-left: 0px;
margin-right: 0px;
Sometime it solved apparently padding problems for me. Hope it'll work.

Categories

Resources