How do I prevent the android keyboard push my container up?
Question
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><a href="#">CLICK AQUI</a></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"> <a href="" class="button">Submit</a> </form> </div> <div class="footer-container"> <span>THIS IS THE FOOTER</span> </div> </div> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2020-08-06 05:21:58
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.