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

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.

Related

display: none; on android

I have created a switchable list of "single image with text" and I only want the active to be visible. All works ok at PC browsers (tried Firefox, IE) but on mobile ANDROID browser (Chrome) I can only see the first "visible" image, while the rest keeps only displaying text.
html:
<ul class="tabs clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul><!-- tabs -->
<div class="box visible">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic1.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic2.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic3.png" width="437" height="545" alt="">
</div><!-- box -->
css:
.tabs li {
width: 20px;
height: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
background-color: #cbcfd1;
margin: 0 13px 13px 0;
-moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
cursor: pointer;
}
.tabs li:hover {
background-color: #8bcb9d;
}
.tab li.active {
cursor: default;
background-color: #35a654;
}
.box {
display: none;
line-height: 30px;
}
.box.visible {
display: block;
line-height: 30px;
}
I understand from what I found here that there is some kind of problem with mobile Chrome but since I'm a beginner I can't make heads or tails of what I'm supposed to to with it to make it work. Can anyone help please? When I remove display: none; and put block in there, all images can be seen stacked below each other but that is not desired.
I found out that the problem only occures on a mobile phone size device. Galaxy Tab 2 tablet I tried displays everything ok.

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>

html + css not rendering properly in android phonegap

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!

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.

android phonegap Design

I have designed my phonegap android application using html and
css.
So i want to know how to get
the same design size in all the mobiles.Is there any settings
available.Please tell me the solution.
Thanks in Advance.
update
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
</head>
<style>
#searchwrapper {
width:90%;
height:48px;
background-image:url(../images/input-box.png);
background-repeat:no-repeat;
background-size: 100% 100%;
margin-left:15px;
position:relative;
}
.searchbox {
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:86%;
height:34px;
}
.searchbox_submit {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:90%;
width:9%;
height:40px;
}
#searchwrapperIC {
width:90%;
height:48px;
background-image:url(../images/input-box.png);
background-repeat:no-repeat;
background-size: 100% 100%;
margin-left:15px;
position:relative;
}
.searchboxIC {
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:86%;
height:34px;
}
.searchbox_submitIC {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:90%;
width:9%;
height:40px;
}
body {
font-family:Arial,Geneva,Verdana,sans-serif;
font-size: 0.8em;
overflow-x: hidden;
}
#loadingScreen {
background: url(../images/ajax-loader.gif) no-repeat 5px 8px;
padding-left: 25px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
.checkBox
{
background-position: 0px 0px;
}
.checkBoxClear
{
background-position: -32px 0px;
}
.checkBox, .checkBoxClear
{
background-image: url('../images/CheckBox2.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
</style>
<body>
<!-- Home -->
<div data-role="page" id="page1" style="background-color:white">
<div data-theme="a" data-role="header">
<img src="images/header-search-causes.png" alt="image" style="width:100%" />
</div>
<div data-role="content" style="padding: 16px">
<br>
<label style="font-size:12pt" align="center">Choose one of the following options to search our directory of causes</label></td>
<br/>
<div id="searchwrapper" style="width:90%;"align="center">
<input type="text" class="searchbox" name="s" value="" placeholder="Search" />
<img src="images/search-button.png" alt="image" class="searchbox_submitIC" />
</div>
<br/>
<li style="list-style:none" data-theme="b">
Button<br/>
Button<br/>
Button<br/>
Button<br/>
</li>
</div>
<div style="margin-top:4%;border-width:3px;padding-top:2%;background-color:#00458D;" align="center" data-theme="#00458D" data-role="footer" data-position="fixed">
<table width=100%>
<tr><td></td></tr>
<tr>
<img src="images/Home.PNG" alt="image" style="width:20%;height:6%;" />
<img src="images/messages-menu.jpg" alt="image" style="width:20%;height:6%;" />
<img src="images/settings-menu.jpg" alt="image" style="width:20%;height:6%;" />
<img src="images/close-menu.png" alt="image" style="width:20%;height:6%;" />
</tr>
</table>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>

If you are doing Without JQuery mobile you have to do the dynamic layout sizes to the content like
You have to use percentage for height and width
Make the style to html body position relative
And give style position absolute to the inner body element
Note: Designing Layout using jquery mobile framework is very easy to make a good and rich layout. And you dont need to bother about the Various mobile sizes. It can manage automatically.

Categories

Resources