CODEWITHSUNDEEP
csswordpresscontact-form-7
NullEins
NullEins

Reputation: 101

Contact form 7 not expanding on a fixed parent div

The div containing the CF7 is hidden until the user click on an icon, then the icon it's replaced with one with another color in the right bottom corner of the form, so Im using a fixed div for that. The problem is that when an error/success message appears the elements move outside of the form (and of the viewport), I need the form to expand in order to see all the elements or a solution for that.

My CF7

My CF7 after an error/success message

My relevant code:

/*Div for the CF7*/
#div-mail {
display: none;
position: fixed;
bottom: 4%;
right: 3%;
}

.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
height: 286px;
}

/*First icon*/
#img-mail {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
}

/*second icon*/
#img-mail-active {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
display: none;
z-index: 1;
}

Upvotes: 0

Views: 605

Answers (2)

Temani Afif
Temani Afif

Reputation: 273481

you need to change the height with min-height like this :

.wpcf7-form {
    margin: 30px 30px 30px 30px;
    width: 350px;
    min-height: 286px;
}

Upvotes: 2

git-e-up
git-e-up

Reputation: 904

I had to deal with something like this recently. Basically, I wrote a function to adjust the height of my form based on the invalid trigger.

 $(".wpcf7").on('wpcf7:invalid', function(event){
   adjustHeight();
 });

For the adjustHeight() function, I did something like this for wider screens.

    function adjustHeight() {
       if ($(window).width() > 640){
         if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
           $('body').find('.contact-container').css('height', '2500px');
         } else {
           $('body').find('.contact-container').css('height', '2200px');
         }
       }
    }

Not the most elegant solution, but it worked.

Upvotes: 0

Related Questions