How to prevent JS from deforming my div-Container?

Question

Somehow when I try to use JS to show hidden content (the login formular when clicking the login-button) my formular gets deformed. Espescially the "register" Button is too long and I can't locate my problem properly. When I'm deleting the JS and the display:none attribute in #login-fenster it shows up as I wanted to. I've tried to copy the neccessary code to JSfiddle, I hope it worked. Until now I havn't any clue about responsive design so you have to max the output window i think. sorry for that!

I have deleted diverse parts of the code and tried to locate the problem but only found a connection to JS

https://jsfiddle.net/vz2jfmkc/1/

function myFunction() {
  var x = document.getElementById("login-fenster");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

body, main{

    background-color: #000000;
    overflow-x: hidden;
}
nav {
    background: #0d0d0d;
    width: 100vw;
    top: 0;
    
}
.nav {
   display: flex;
    justify-content: flex-end;
    list-style: none;
    height: 3vw;
    text-align: center;
    align-items: center;
    padding: 0 2vw 0 0;
}
nav ul {
    padding: 0px;
    margin: 0;
    right: 0;   
}
nav ul li a {
    color: #fff;
    background-color: #262626;
    text-decoration: none;
    padding: 12px;
    font-size: 1.2rem;
    padding-right: 10px;
    border-radius: 5px 5px;
    border: #262626 1px solid;
    transition: 0.5s;
    transition: background 1s ease-in-out;
} 
 nav ul li a:hover {
     color: #ffffff;
     text-decoration: none;
     font-weight: 100;
     background: linear-gradient(#262626, #595959);
}
nav button {
    color: #fff;
    background-color: #262626;
    text-decoration: none;
    padding: 12px;
    font-size: 1.1rem;
    padding-right: 10px;
    border-radius: 5px 5px;
    border: #262626 1px solid;
    transition: 0.5s;
    transition: background 1s ease-in-out;
}
#login {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;

}
#login:active {
         transform: scale(0.9);
}
.news {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.news:active {
    transform: scale(0.9);
}
.tests {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.tests:active {
    transform: scale(0.9);
}
.community {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}   
.community:active {
    transform: scale(0.9);

}
.index {
    margin-right: 1rem;
    transition: transform 0.1s ease-in-out;
}
.index:hover {
    transform: scale(0.9);
}
.search {
    margin-right: 1rem;
}
#login-fenster {
    right: 0;
    margin-top:  0rem;
    margin-right: 19rem;
    z-index: 100;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    height: 30vh;
    width: 18vw;
    background-color: black;
    color: white;
    position: absolute;
    border: 3px solid white;
    border-radius: 20px 20px;
    
}
.login-form {
    margin-top: 10px;
}
#login-fenster input[type="text"]{
    font-size: 1.3rem;
    border-radius: 8px 8px;
}
#login-fenster input[type="password"]{
    font-size: 1.3rem;    
    border-radius: 8px 8px;
}
.register {
    margin-top: 10px;
    background: #262626;
    border: 1px solid white;
    border-radius: 15px 15px;
    transition: transform all 0.2s;
}
.register a {
    text-decoration: none;
    color: white;
    font-size: 1.3rem;
    transition: transform all 0.2s;
}
.register:active {
    transform: scale(0.95);
}
button {
    cursor:  pointer;
    color: white;
    background-color: #262626;
    padding: 0.5rem;
    border-radius: 15px 15px;
    border: 1px solid white;
    font-size: 1rem;
    transition: transform 0.2s;
}
button:active {
    transform: scale(0.95);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Koop_bude</title>
        <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" />
    </head>
    <header>
         <nav>
            <ul class="nav">
                <button id="login" onclick="myFunction()">Login</button>
                <li class="news"><a href="news.html">News</a></li>
                <li class="tests"><a href="#">Tests</a></li>
                <li class="community"><a href="#">Community</a></li>
                <li class="search"><input type="search" placeholder="Suche..." /></li>
            </ul>
        </nav>
            <div id="login-fenster" style="display:none;">
                <input class="login-form" type="text" placeholder="Username" name="username" required />
                <input class="login-form" type="password" placeholder="Passwort" name="password" required />
                <button class="login-form" type="submit">Login</button>
                <label>
                    <input class="login-form" type="checkbox" checked="checked" name="remember">Eingeloggt bleiben
                </label>
            <div id="forgot-password">
                <button class="forgot-password-button">Passwort vergessen?</button>
            </div>
            <div class="register"><a href="#">Registrieren</a>
            </div>
            </div>
    </header>
    
    <body>
        <script>
        function myFunction() {
     var x = document.getElementById("login-fenster");
     if (x.style.display === "none") {
      x.style.display = "block";
     } else {
      x.style.display = "none";
  }
}
        </script>
        </body>

I want the content to show up on a line under the login button. I gave that content specific parameters which looked good to me for a newbie and I don't want JS to deform it.

You might get some clues from this post, which shows how `` sizing can be constrained within a surrounding `
`. https://stackoverflow.com/questions/11730468/is-it-possible-to-style-a-text-input-to-fill-the-width-of-its-parent — Marc, Mar 28 '19 at 20:23

score 0 · Accepted Answer · answered Mar 28 '19 at 21:19

Thanks for that JSFiddle - though I'm still a little confused about what you're hoping to accomplish. From what I understand, your issue is more of a CSS issue than a JavaScript issue. If your issue is that the white border cuts through your content:

then removing

#login-fenster {
    ...etc...
    height: 30vh;     <----- Remove this to keep everything inside regarding Y-Axis
    width: 18vw;      <----- Remove this to keep everything inside regarding X-Axis
    ...etc...
}

and now all of your items will always be inside your white border

If you want the different input fields to be on different lines, just add a <br /> tag between your inputs:

<input class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />

On the other hand, if you really want the boxes to grow/shrink, and you want to leave width: 18vw; (I still highly recommend you get rid of the height: 30vh;... that's not helping you at all) then just set the width attributes to be 100% of the parent-div (the white box).

<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />

Thank you so much for your detailed answere! To delete height and width was the right thing. But when I managed things so far and I get to responsive design I should place the width-attribute but I can and should leave out the height-attribute. Did I got this right? — Stuckz, Mar 29 '19 at 10:30
@Stuckz Yep - you're correct! I hardly every use `vh`, leave out the height, `vw` is far more common. Though... If I were in your shoes, I wouldn't worry about making that login dropdown responsive to different screen sizes. It's not a big enough screen element to make a difference. "Responsive design" isn't about making every single element sized proportional to the screen, it's about making sure that your website looks good no matter what size it's viewed with. — JeremyW, Mar 29 '19 at 12:07
@Stuckz Often that means dropdowns and popups don't need to be fixed much (*if at all*) - instead it usually ends up being fixing page layouts so they condense into a mobile-friendly order, one after the other. — JeremyW, Mar 29 '19 at 12:07

How to prevent JS from deforming my div-Container?

1 Answers1