联系表格 7 未在固定父项上扩展 div

Question

包含 CF7 的 div 是隐藏的，直到用户单击一个图标，然后该图标在表格的右下角被替换为另一种颜色，所以我使用固定的 div 为此。问题是，当 error/success 消息出现时，元素移出表单（和视口），我需要展开表单才能看到所有元素或解决方案。

My CF7

My CF7 after an error/success message

我的相关代码：

/*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;
}

Answer 1

我最近不得不处理这样的事情。基本上，我写了一个函数来根据无效触发器调整表单的高度。

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

对于 adjustHeight() 函数，我为更宽的屏幕做了类似的事情。

    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');
         }
       }
    }

不是最优雅的解决方案，但它有效。

Answer 2

您需要将高度更改为 最小高度，如下所示：

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

联系表格 7 未在固定父项上扩展 div

Contact form 7 not expanding on a fixed parent div

css

wordpress

contact-form-7