CODEWITHSUNDEEP
javascriptjquerycss
Joe Half Face
Joe Half Face

Reputation: 2333

JS element inserting causes unexpected shift

Here is example

What I am talking about, is that when you blur out of password field (here for example) JS inserts below form error message. The problem that is slides down FB login link, and I can't figure out why.

Also, it is side problem, but when you hover on submit button (effect is making border wider) FB link also shifts down a little bit.

.new_user_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -300px;
    background: #fff;
    width: 600px ;
    height: 210px;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    z-index: 9999999;
    font-size: 14px;



}
.new_user {
    border-right-style: solid;
    border-color:  rgba(80, 140, 255, 0.83);
    border-width: 1px;
    padding-right: 40px;
    margin-top: 30px;
    margin-left: 50px;
    display: inline-block;
    width: 200px;




}
input#user_email{
   width: 180px;
    border-color:  rgba(80, 140, 255, 0.83);
    height: 15px;
    font-size: 13px;
}
input#user_password{
    width: 180px;
    border-color:  rgba(80, 140, 255, 0.83);
    height: 15px;
    font-size: 13px;
}
input#user_password_confirmation{
    width: 180px;
    border-color:  rgba(80, 140, 255, 0.83);
    height: 15px;
    font-size: 13px;
}





.sign_up_submit {
    margin-top: 5px;
    border-style: solid;
    background-color: #ffffff;
    color: rgba(80, 140, 255, 0.93);
    border-width: 2px;
    padding-bottom: 10px;
    height: 25px;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    font-size: 16px;
    border-style: solid;
    border-color:  rgba(80, 140, 255, 0.83);
    font-weight: 500;

}
.sign_up_submit:hover {
       border-width: 3px;
}

.format_error {
    background-color: #d61354;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;;
    font-weight: 300;
    font-size: 12px;
    color: white;
    padding-right: 0;

    width: 150px;
}
.fb_sign_up{
    display: inline-block;
    vertical-align: 50px;
    margin-left:50px;

}
#facebook_sign_up{

    display: block;
    width: 200px;
    height: 53px;
    background: url(http://static.freepik.com/free-photo/fb-connect-button-vector_630856.jpg) ;
    background-size: 200px 106px;
    background-position: 0 0;




}

Upvotes: 1

Views: 172

Answers (2)

Morgan ARR Allen
Morgan ARR Allen

Reputation: 10678

It looks like general misuse of inline-block. The form element should ever be a block element. But for a quick fix I got it working here.

http://jsfiddle.net/uuyFt/

With this I added float: left to .new_user and changed vertical-align to padding-top on .fb_signup

You may want to consider using a CSS framework to help layout your columns. Bootstrap CSS is a popular choice.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

That's because your .fb_sign_up div is an inline-block, and the vertical-align you're setting is relative to the parent (which expands when the error message shows). From the MDN page on vertical-align:

<length>

Aligns the baseline of the element at the given length above the baseline of its parent

I believe you can achieve the desired result with with a couple of small changes:

.fb_sign_up{
    display: inline-block;
    vertical-align: top;
    margin-top: 50px;
    margin-left:50px;
}

http://jsfiddle.net/tHV4W/1/

Upvotes: 1

Related Questions