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.
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.
This is my first question, sorry if I made something wrong.
Well I'm trying to create a rounded button that dynamically "fills" according to a parameter. I've created an inner div inside the button, absolute positioned in the bottom. It works perfect on chrome webview, but I cant make it work on android 4.1.
here is how it should look:
right
and this is how it looks on android 4.1:
wrong
This is my code:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a> </div>
The "button" class is position:relative and the other classes just add a different border color.
I've tryed everything I could find with no success...
Thanks!
You need to change the block formating context of <a> and set it to relative position too:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a>
</div>
added :
a {
display:inline-block;
position:relative;
}
Do not mind the webkit prefixe not needed anymore or use last the non prefixed rules (transition)
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>
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!