문의 양식 7 고정 된 부모 div에서 확장하지 않음

Question

CF7이 포함 된 div는 사용자가 아이콘을 클릭 할 때까지 숨겨지고 아이콘은 폼의 오른쪽 하단 모서리에 다른 색상으로 대체됩니다. 그 고정 div. 문제는 오류/성공 메시지가 나타나면 요소가 폼 (및 뷰포트) 외부로 이동하기 때문에 모든 요소 또는 솔루션을 보려면 폼을 확장해야합니다.

My CF7 after an error/success message

My CF7

내 관련 코드 :

/*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'); 
     } 
     } 
    } 

가장 멋진 해결책은 아니지만 효과가있었습니다.