Flexbox - cross axis

Hey Guys

I have this issue aligning my boxes against the top cross axis (exercising something totally else xp) Following the informations, I should just set my align-items in the flex-container as flex-start and it should work. Now, it does not. I’ve I choose other values, it also doesnt change anything. is there some kind of required to make this work? It bugs me I cannot get it fixed.

html:

        <div class="loginsystem">

            <div class="fuckmelife">
                    <button class="login" id="loginfile">LOGIN</button>
                    <div class="loginform" id="loginform">
                        <br>
                        <br>
                        <form action="" method="POST">
                            <input type="text" id="username" placeholder="Username">
                            <input type="password" id="pwd" placeholder="Password">
                            <br>
                            <br>
                            <input type="submit" name="submitlogin" value="Log Me In">
                        </form>
                    </div>
            </div>

            <div class="fuckmelife">
                    <button class="signup" id= signupfile>SIGN UP</button>
                    <div class="signupform" id="signupform">
                        <br>
                        <br>
                        <form action="" method="POST">
                            <input type="text" id="name" placeholder="Name">
                            <input type="text" id="firstname" placeholder="First name">
                            <input type="text" id="mail" placeholder="E-mail">
                            <input type="text" id="username" placeholder="Prefered username">
                            <input type="password" id="pwd" placeholder="Password">
                            <br>
                            <br>
                            <input type="submit" name="submitsignup" value="Sign Me Up">
                        </form>
                    </div>
            </div>
               
        </div>

css:

/* flexcontainer */
.loginsystem{
    display: flex;
    align-items:baseline;
}

/*flexbox */
.fuckmelife{
    margin-bottom: 25px;
    width: 100%;
    height: auto;
}

/*hidden form inside each flexbox */
.loginform, .signupform{
    display: none;
}

Also, but I haven’t really checked this very well myself, but the eventlistner on my buttons, it doesn’t work to hide the form against. If I don’t remove the eventlistner it should keep working no?


let loginbutton = document.getElementById('loginfile');
let signupbutton = document.getElementById('signupfile');

let loginzone = document.getElementById('loginform');
let signupzone = document.getElementById('signupform');




const login = () => {
    if(loginzone.display = "none") {
    loginzone.style.display = "block";
    } else {
    loginzone.style.display = "none";
    }
};

const signup = () => {
    if(signupzone.display = "none") {
    signupzone.style.display = "block";
    } else {
    signupzone.style.display = "none";
    }

};



loginbutton.addEventListener("click", login);
signupbutton.addEventListener("click", signup);


thank you for your feedback!

kr,

Yannick

Hey Guys

I solved the problem using a set top margin on the flexboxes. But I don’t understand why the flexbox needs this to work?

also, still looking for the eventlistner issue.

kr,

yannick

Hi Yannick,

the value to align item at the top along the x-axis would be flex-start.

You are using the assignment operator in all your if statements rather than comparing the values. That’s not going to work.

Hey Mirja

Yes I know the baseline/flex-start, I put baseline to check if it did anything at all. but both didn’t work untill I set a topmargin. Which I don’t understand why the flexbox needs it work.

the operator, yeeees, stupid me! thank you!

Kr,

Yannick

Hey Mirja

Also changing to the correct comparison operator didn’t make the code work.
Moreover, it doesn’t work anymore now, it doesn’t do aything.

Kr,

Yannick

There is no top margin in the code you posted and when I try your code, the elements with the class fuckmelife align across the x-axis. Which elements do you expect to align top?

I’ve put the top-margin at the flexbox. Below you can see it the complete css file.
It doesn’t align top with me without the topmargin when the form gets displayed. it centers the button and the form vertical in the div element. Which is not good because the signup form is longer than the login. anyway, that has been fixed. I just don’t get why i need a top-margin for it.

body{
    text-align: center;
    background-color: aqua;
}

div {
    width: 50%;
    margin: auto;
    background-color: beige;
}

p{
    font-size: 50px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    color:black;
}

p:hover {
    color:red;
    background-color: greenyellow;
}





/* flexcontainer */
.loginsystem{
    display: flex;
    align-items: flex-start;
}

/*flexbox */
.fuckmelife{
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
 
}

/*hidden form inside each flexbox */
.loginform, .signupform{
    display: none;
}

More focused on this JS code now. Simple, you click the button, you get the form, you click the button again, form dissapears. But my if statement inside my function clearly doesn’t work on that. I just re-wrote it from scratch (using the correct operator this time :D) but that makes the problemes worse :smiley: Now, my eventlistner doesn’t work at all. here below the code I just re-wrote. The purpose is simple. Click it, form opens (&also closes the other form when it is open), click it again, form closes.


let loginbutton = document.getElementById('loginfile');
let signupbutton = document.getElementById('signupfile');

let loginzone = document.getElementById('loginform');
let signupzone = document.getElementById('signupform');




const login = () => {
    if(loginzone.display == "none") {
        loginzone.style.display = "block";
        signupzone.style.display = "none";
    } else {
        loginzone.style.display = "none";
    }
}

const signup = () => {
    if(signupzone.display == "none") {
        signupzone.style.display = "block";
        loginzone.style.display = "none";
    } else {
        signupzone.style.display = "none";
    }
}



loginbutton.addEventListener("click", login);
signupbutton.addEventListener("click", signup);


I still don’t understand your problem with the css alignment, it works as expected I think:
Bildschirmfoto 2021-03-03 um 12.30.45

This still doesn’t work. You have to work with .getComputedStyle(), see reference:
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

If you put a console to each of your if and else statements, you’ll see that your event listener works, it just goes straight to the else statement.

Solution:

Summary

let display = window.getComputedStyle(loginzone).getPropertyValue(‘display’);
if(display === “none”)