CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Form fields position issue on focus

As you can see on my website, I'm trying to implement a nice transition when a form field is on focus.

The only issue that I have is that when the first field ("Prenom") is on focus, it creates a huge gap between this field and the field below ("Telephone"). Its probably due to the transform: translateY(-2px); but I don't understand why there's this huge gap only below the "Prenom" field and have no idea how to fix that.

I didn't post the full code because it's too long (the site uses wordpress), but hopefully the live link should help you.

Many thanks for your help

enter image description here

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 16px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: -webkit-transform,box-shadow;
    transition-property: transform,box-shadow;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);


}


.wpcf7-text:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.wpcf7-text:focus, .wpcf7-textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px rgba(0,0,0,.15);
    cursor: default;
    border: 1px solid #D7E9BC !important;
    background-color: #fff !important;
}

HTML

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">[text* first-name placeholder "Prénom"]</div>
<div class="column-half">[text* last-name placeholder "Nom"]</div>
</div>

<div class="form-row">
<div class="column-half">[email* your-email placeholder "E-mail"]</div>
<div class="column-half">[text* your-phone placeholder "Téléphone"]</div>
</div>

<div class="form-row">
<div class="column-full">[textarea* your-message placeholder "Votre message"]</div>
</div>

<div class="form-row">
<div class="column-half">[recaptcha]</div>
<div class="column-half">[submit "Envoyer"]</div>
</div>

</div><!--end responsive-form-->

Upvotes: 0

Views: 19

Answers (2)

MikkoS
MikkoS

Reputation: 96

Seems like that's a clearfix problem.

There are few tricks that I like to use myself for clearfix problems:

Add either overflow: auto; or display: inline-block; (I think overflow: hidden; should also work) to your .form-row class, and the problem should be gone.

Upvotes: 0

Esteban Gerpe
Esteban Gerpe

Reputation: 364

You have border: none !important in the .wpcf7-text class when not hovering. Change it for border: 1px solid transparent !important.

Upvotes: 2

Related Questions