0

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.

Improve this question
1
  • 1
    Why do you need to set the height to 440? leave it to be auto.
    – Ali Sheikhpour
    Commented 45 mins ago

2 Answers 2

Reset to default
2

Consider avoiding fixed width and height for elements.

Here is your updated fiddle: https://jsfiddle.net/mdhasanpatwary/sefn7z6p/3/

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;
    max-width: 320px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.right-authorization{
    width: 90%;
    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-block: 15px;
   
    
}

.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;
    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: 100%;
}

.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>

Improve this answer
0

you can remove the fixed height from the .right-authorization class and let it adjust automatically based on its content.

.right-authorization {
width: 90%;
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: hidden;

}

Improve this answer
New contributor
OM GANAPURE is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.