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