連絡先フォーム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'); 
     } 
     } 
    } 

最も洗練されたソリューションではありませんが、機能しました。