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

Question

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

Answer 1

您需要最小高度改变高度这样的：您正在使用**高度

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

Answer 2

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

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

不是最优雅的解决方案，但它的工作。