联系表格7不在固定的父div上扩展

时间:2017-09-28 15:52:16

标签: css wordpress contact-form-7

包含CF7的div被隐藏,直到用户点击图标,然后图标被替换为表单右下角的另一种颜色,因此我使用固定的div。问题是,当出现错误/成功消息时,元素移动到窗体(和视口)之外,我需要扩展窗体以查看所有元素或解决方案。

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

2 个答案:

答案 0 :(得分:2)

您需要使用 min-height 更改高度,如下所示:

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

答案 1 :(得分:0)

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

 $(".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');
         }
       }
    }

不是最优雅的解决方案,但它确实有用。