聯繫表格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'); 
     } 
     } 
    } 

不是最優雅的解決方案，但它的工作。