I have a registration form.
Container form – and inside div elements (login/email)
Height and Width are constant (width: 90%, height: 440px)
And have <div class="error"> element – where i "innerHTML’ error message.
But when it inserts error it goes out of Container.
Click "SIGN UP" – the container size doesn’t stretch (
How to stretch container to its new size with messages ?
You can run code here: https://jsfiddle.net/krekercod4/ojzambrv/1/
function userRegister(){
let emailField = document.getElementById("email").value;
let passField = document.getElementById("password").value;
let fullNameField = document.getElementById("fullName").value;
let phoneField = document.getElementById("phoneNumber").value;
let person = {
email: emailField,
password: passField,
fullName: fullNameField,
phoneNumber: phoneField,
};
//let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
if(emailField==""){
emailDiv.innerHTML="Please inter Email";
}
if(passField==""){
passDiv.innerHTML="Please inter password";
}
if(fullNameField==""){
fullNameDiv.innerHTML="Please inter full name";
}
if(phoneField==""){
phoneDiv.innerHTML="Please inter phone number";
}
else{users.push(person);
//localStorage.setItem("UsersVK",JSON.stringify(users));
alert("User saved successfully");}
}
.right{
background-color: #222222;
border-radius: 12px;
width: 30%;
display: flex;
justify-content: center;
}
.right-authorization{
width: 90%;
height: 440px;
border: 1px solid #363738;
border-radius: 12px;
background-color: #2d2d2d;
color: white;
padding: 5px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 400;
justify-content: center;
gap: 8px;
margin-top: 15px;
overflow: visible;
}
.sign-in{
display: flex;
align-items: center;
gap: 6px;
margin-top: 15px;
}
.login-outside {
background-color: #222222;
border-radius: 10px;
border: 1px solid #363738;
padding: 5px;
margin-top: 10px;
width: 250px;
display: flex;
align-items: center;
gap: 5px;
}
.login-write{
margin-left: 5px;
display: flex;
align-items: center;
gap: 5px;
}
.login-write input{
margin-bottom: 2px;
color: white;
width: 200px;
}
.login-write input:focus{
border-color: transparent;
outline: none;
}
.inside{
background-color: transparent;
border-color: transparent;
}
.login{
display: flex;
flex-direction: column;
align-items: center;
}
.login button{
background-color: #5e8abe;
border: 1px solid #363738;
border-radius: 10px;
padding: 3px 20px;
font-weight: 500;
width: 110px;
height: 35px;
margin-top: 20px;
color: white;
}
.login button:hover{
background-color: white;
color: black;
}
.register-text{
font-size: 12px;
color: #8f8f8f;
padding: 10px;
display: flex;
text-align: center;
margin-top: 10px;
}
.register-text a{
text-decoration: underline rgb(193, 193, 193);
color: white;
}
.register-text a:hover{
color: #7a7a7a;
}
.invalid {
color: #ff2748;
border-color: #ff2748;
margin-top: 5px;
}
<div class="right">
<form class="right-authorization">
<div class="sign-in">
<i class='bx bx-user bx-sm'></i>
SIGN-UP
</div>
<hr>
<div class="login one-container">
<div class="login-outside" >
<div class="login-write">
<i class='bx bx-user bx-xs'></i>
<input class="inside" type="text" placeholder="email" id="email" >
</div>
</div>
<div id="emailDiv" class="invalid"></div>
<div class="login-outside">
<div class="password login-write">
<i class='bx bx-lock-alt bx-xs'></i>
<input class="inside" type="password" placeholder="password" minlength="6" id="password">
</div>
</div>
<div id="passDiv" class="invalid"></div>
<div class="login-outside">
<div class="name-surname login-write">
<i class='bx bx-edit-alt bx-xs'></i>
<input class="inside" type="text" placeholder="full name" id="fullName">
</div>
</div>
<div id="fullNameDiv" class="invalid"></div>
<div class="login-outside">
<div class="number login-write">
<i class='bx bx-phone bx-xs'></i>
<input class="inside" type="text" placeholder="phone number" id="phoneNumber">
</div>
</div>
<div id="phoneDiv" class="invalid"></div>
<button type="button" onclick="userRegister()">Sign up</button>
<div class="register-text">
<span>Already have an account ? <br><a href="web-site_login.html">Sign in</a></span>
</div>
</div>
</form>
</div>
Wanna stretch container to new size after inserting "innerHTML".
I am new at HTML/CSS.
2
Answers
you can remove the fixed height from the .right-authorization class and let it adjust automatically based on its content.
}
Consider avoiding fixed width and height for elements.
Here is your updated fiddle: https://jsfiddle.net/mdhasanpatwary/sefn7z6p/3/