Menu
I have input with position fixed at the bottom of the page, and when on mobile i select the input screen height comes smaller and my inputs comes hiden, then browser scroll page to it, how can i make my inputs stay at visible bottom? But for some reason it works ok only in android browsers(3-d pictude), for iphones and microsoft devices it's 2-nd pictue. 
530
I wouldn't do that with position fixed. It's works like position absolute. So you have to calculate gaps manually to locate element properly. Even if you hardcode the gaps that doesn't always work as expected because many times I saw position fixed is not working as expected in every browser. I suggest you to work with Flexbox.
I guess you want to create an app like a chat app. So the easiest way to solve this is issue to use Flexbox properties.
I have created a template for you check the snippet below. I put some comments for you. Play wtih flex properties and see how things are working.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Check these codes */
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: grey;
}
header,
footer {
flex: none;
background-color: DodgerBlue;
padding: 10px;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
background-color: moccasin;
}
/* These are not related to your topic it's just for styling */
.msg {
padding: 20px;
margin: 20px;
background-color: lightgreen;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.user-input {
width: 100%;
border-radius: 5px;
border: 1px solid grey;
height: 20px;
}
</style>
<title>Template</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>
<div class="input-container">
<input class="user-input" type="text" name="" value="Type something here...">
</div>
</footer>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
