I am a recent front-end developer, I am working on a chat page that will be seen in browsers and on mobile devices. The page has an issue related to the on-screen keyboard appearing when a user wants to write a message. When the keyboard appears, the header is raised and the text box is above the keyboard, the problem is that the header should remain up while the text box is positioned above the keyboard, additionally if I scroll the header appears but the box getting behind the keyboard. I need a solution to automatically adjust the content using only CSS, so that all elements are always visible, the header as well as the text box.
full chat
chat with keyboard displayed
text box goes down
This is the HTML and CSS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat fijo en la pantalla</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
content-visibility: auto;
box-sizing: border-box;
overflow-y: hidden;
}
body {
height: 100vh;
font-family: Arial, sans-serif;
background-color: rgb(0, 128, 255);
overflow: hidden;
box-sizing: border-box;
}
.header {
display: flex;
align-items: center;
padding: 10px;
color: #000000;
background-color: white;
position: fixed;
height: 50px;
border: 0;
top: 0;
max-width: 430px;
width: 100%;
box-sizing: border-box;
z-index: 2;
}
.contact-photo {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 3px 6px;
}
.contact-info h2 {
margin: 0;
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 99%;
}
.header-icons {
position: absolute;
right: 10px;
display: flex;
align-items: center;
}
.icon {
width: 24px;
height: 24px;
margin-left: 15px;
}
.contenedor-principal {
display: flex;
flex-direction: column;
height: 100vh;
/* Ajustado a 100vh para ocupar toda la pantalla inicialmente */
padding: 60px 0;
overflow-y: auto;
background-color: gray;
max-width: 430px;
width: 100%;
}
.chatContenedor {
background-color: black;
border: 2px solid white;
width: 50%;
min-height: 100vh;
margin-bottom: 10px;
}
.input-bar {
position: fixed;
background-color: rgba(247, 248, 250, 1);
max-width: 430px;
width: 100%;
bottom: 0dvh;
display: flex;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
.input-bar input {
flex: 1;
padding: 10px;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 25px;
height: 45px;
font-size: 15px;
}
.buttonSend {
background-color: rgba(2, 175, 156, 1);
border-radius: 50%;
width: 11%;
border: 0;
color: white;
margin-left: 5px;
height: 45px;
font-size: 23px;
margin: 0;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html"><img style="width: 30px;" class="headeExit-img" src="img/exit.png" alt=""></a>
<img src="img/perfil1.png" alt="Foto de Contacto" class="contact-photo">
<div class="contact-info">
<h2>Directora segundo A Luz Maria</h2>
</div>
<div class="header-icons">
<img src="img/puntos.png" alt="Menú" class="icon">
</div>
</div>
<div class="ContentAllChat">
<div class="contenedor-principal">
<div class="chatContenedor"></div>
<div class="chatContenedor"></div>
<div class="chatContenedor"></div>
<div class="chatContenedor"></div>
</div>
</div>
<div class="input-bar">
<input id="inputChat" type="text" placeholder="Escribe un mensaje...">
<button id="sendMessage" class="buttonSend">
<p style="margin: 0;"> > </p>
</button>
</div>
</body>
</html>
New contributor
Juan Duarte is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.