Elementor POPUP Dropdown Menu not Working

I’m Facing an Elementor POPUP Dropdown menu issue I have created a popup using Elementor but dropdown menu not working on popup Please take a look at the screenshot I’ve attached and help. Thank you in advance for your and your help!

The screenshot appears to be missing. Could you post it please?

1 Like

Please check here

Here is my site URL
https://web.theweb.cyou/
open it and click on “open popup”

Given that you have numerous scripts all minimised, I think you are going to need to help us out here.

Can you share the code you have written to handle the pop-up and drop-down menu?

It’s a WordPress website and I use Elementor page builder to create this popup.
The problem is that the inline js never get executed on the popup since it’s out of the dom before it opens. Now I want to fix this problem
Here is the code which I used in the custom CSS to resolve this issue but the issue not resolve:

selector .elementor-popup-modal .dialog-message {
overflow-x: visible;
}

Edit
This is not a problem
Basically in third column elementor fetching telephone number from third party plugin and dropdown menu not working
Kindly take a look and help me
Thanks in advance

Can you help me?

I haven’t used wordpress for a couple of years and I am not familiar with Elementor. I would basically be googling for solutions and info myself and unfortunately my time is limited right now.

Maybe someone else here is a little more familiar with the process.

I know nothing about this but maybe this example will **help the JS gurus around here ** to formulate a proper answer. :slight_smile:

I was able to get your country dropdown to show by adding this code at the end of your page.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
  <script>
 jQuery(document).on("elementor/popup/show", function() {
      console.log('here i am');
      var input = document.querySelector("#form-field-field_10b81f9");
      window.intlTelInput(input);
    });
  </script>
</body>

Screenshot of it working:

The js initialises the country dropdown when the popup is opened. Of course if the id is dynamic then this won’t work and will have to be found by other means.

I also had to include the link to the cdn but that may be just because I was testing locally.

As I said this is not my area and the JS is above my paygrade but maybe it will help others in diagnosing the problem :slight_smile:

2 Likes

Thank you so much!!!
It really helps me to resolve my issue
But it works for desktops but not for mobile… Kindly help me with mobile too

One more thing I also want to show the number code with the flag in this field as attached in the screenshot:

The country code display issue also resolve successfully! Now just a mobile display remains!

Here is the final code:

<script>
 function call(){
  let coder = document.getElementsByClassName("iti__active")[0].lastChild.innerText
code = document.getElementById("form-field-field_10b81f9").value = coder
console.log(coder)
 }
 jQuery(document).on("elementor/popup/show", function() {
      let input = document.querySelector("#form-field-field_10b81f9");
 call()
      window.intlTelInput(input);
    });
 
  </script>

Thank you all of you, especially @PaulOB

Seems you forgot to actually paste the code there, @hamzarykpk41 :slight_smile:

1 Like

Try adding this to your css:

.iti-mobile .iti--container {
  z-index: 9999;
}

I tried it’s not working
Also, the country code does not display on mobile. Kindly take a look on mobile!

Hi @PaulOB
This code is working on my one site perfectly ( the site which I shared above)

But I also use it on my other site it’s not working. Here is the site: (archiisrael . com) kindly open it and click “Request a call” as attached in the screenshot


I also change the field id in the code but it did not work
Kindly check it and let me know what I’m doing wrong
Thank you!

I’m getting an error in my ios inspector for that call() function.

Hopefully that will help with your debugging as the flag menu seems to appear if that function is commented out but of course you don’t get the number in the field.

Maybe a js guru can comment on exactly what the error means?

Kindly also look at this issue
I don’t know what I’m doing wrong on my other website

Edit
Fixed issue, thank you!

Glad you fixed it. I did have a look but couldn’t spot the problem. :slight_smile:

1 Like