Unable to hide scroll bar + form acting weird

Question

I tried to find a solution in previous questions but overflow:hidden; isn't working for me. There's a lab background image with a potion on it at the top here: www.walterbar.co.il, the potion is supposed to open an overlay with a form. You can see there's some scrolling bar that appears and disappears really quick.

Also, the X button is acting weird when I insert overflow in the Custom CSS plug-in.

Another issue is that for some reason the form won't align to the center (not in the overlay window and not at the bottom).

Any idea why? I apologize for the weird language. :-) Thanks in advance!

The HTML code of the overlay:

<a href="#contact_popup" class="fancybox">
<img id="walterbarpotion" src="http://walterbar.co.il/wp-content/uploads/2017/03/animation_SMALL.gif" style="max-width:250%">
</a>
 <div style="display:none;background-color:black;" class="fancybox-hidden">
    <div id="contact_popup">
        [contact-form-7 id="342" title="צור קשר"]
    </div>
 </div>

The form's HTML:

<style>
input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
input[type="phone"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="phone"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
}
input[type="text"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="text"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}


</style>
<center> 

<label for=".elementor-6 .elementor-element.elementor-element-5m0lukt .wpcf7 input[type="text"]"><input type=text text* your-name placeholder="שם" required </input></label>

<label for= ".wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7-validates-as-tel* your-email"> <input type="phone" tel* tel-196 input placeholder="טלפון" required</input></label>

<label for=".wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email"]"><input type=email email* your-email placeholder="אימייל" ID= "email" </input></label>

[submit "דברו איתנו"]
</center>

Relevant CSS:

.wpcf7-form-control.wpcf7-submit {
  width: 20% !important;
  text-align: center !important;
  background-color: #316e35 !important;
  color: white !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

input[type="submit"]:hover {
  width: 20% !important;
  text-align: center !important;
  letter-spacing: 4px;
  background-color: white !important;
  color: #316e35 !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  animation: bounce 1s;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8);
  transition: opacity 0.5s 0.5s ease;
  font-family: open sans hebrew condensed;
  font-style: italic;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  background: #f9f9f9;
  color: black;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  transition: opacity 0.5s 0.5s ease !important;
  opacity: 0 !important;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease;
  opacity: 0;
}

[placeholder] {
  width: 25% !important;
  background-color: rgba(255,255,255,0.8) !important;
  height: 40px !important;
  color: #333333 !important;
  margin: 0 auto;
  text-align: center !important;
  border-radius: 999em !important;
  display: inline-block;
  left: auto;
  right: auto;
  font-family: open sans hebrew condensed !important;
  font-style: italic;
  min-width: 164px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8) !important;
  transition: opacity 0.5s 0.5s ease !important;
  font-family: open sans hebrew condensed !important;
  font-style: italic !important;
  border: 2px solid #316e35 !important;
  box-shadow: 0 0 10px #719ECE !important;
  min-width: 164px;
}

#wp-sticky-menu.wp-sticky-menu.headroom.slide {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center !important;
}

.wpsm-logo a {
  display: none;
}

.menu-image-title {
  font-family: Amatic SC;
  font-weight: 900;
  font-size: 25px;
  text-align: center !important;
}

.elementor-section-content-top>.elementor-container>.elementor-row>.elementor-column>.elementor-column-wrap
:before {
  content: '';
  background-image: url("http://walterbar.co.il/wp-content/uploads/2017/03/Divider.png");
  height: 73px;
  top: 700px;
}
.elementor-7 .elementor-element.elementor-element-jnflk99 {
    position: relative;
    z-index: 9999;
}

#mc_embed_signup .mc-field-group{
  width:100% !important}

#fanctbox {overflow:hidden;}

#fancybox-wrap {overflow:hidden;}
#fancybox-outer {
  background-color: rgba(0, 0, 0, 0.3) !important;
border: none;
overflow:hidden;
width: 100%;
  height: 100%;
}

#contact_popup, #fancybox-content{
border:none;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0);

Answer 1

Add overflow:hidden!important to #fancybox-content > div.

Remove overflow:hidden from #fancybox-outer to display the full X button.

Set padding:0 in #contact_popup, #fancybox-content and add margin:auto.

Set display:block for .wpcf7-form-control.wpcf7-submit.

If you are using Chrome or Firefox you can right-click any element and select Inspect Element from the context menu. You can directly make changes and see the effect. (The changes won't be saved).

Answer 2

The overflow form is being animated by a jquery script, changing the height dynamically and finally set the height to auto. When the height is being animated in pixels quickly, it is causing an overflow and a scroll bar.

insert this in your script tag

$("#walterbarpotion").click(function(){$("#fancybox-content").css({"overflow":"hidden !important"})})

Answer 3

Inside the fancybox-content you set a div with inline style="width:auto;height:auto;overflow: auto;position:relative;" set the overflow to overflow: hidden to prevent the scrollbar flash when you open the form.

To disable the scroll on body on form opening using jquery:

$('.walterbarpotion').click( function(){

    $('body').css('overflow','hidden');   

});

To set the scroll active again when closing 1st add a class or id to button and so:

$('#fancybox-overlay,#button_id').click( function(){

    $('body').css('overflow','scroll'); 

});

This is not perfect because I need to integrate it in the form check system to prevent the scrollbar showing in case of unsuccessful form check. Hope can help you to understand how it can be work.