Google reCaptcha verification popup not displaying properly in Mat Dialog

Question

I added google reCaptcha in angular material dialog form. But when reCaptcha opens verification popup, it display above the form like in pic.

I also found that whenever mat dialog opens it adds the negative margins to the html tag. And if I remove the margin the captcha verification popup goes into right place but then mat dialog not display properly. I am confused how to make both popup in right place.

Answer 1

I solved problem(kind of hack) at that time only but waiting for proper solution.

Peoples asking why I am adding captcha in popup, so guys its product requirement so can't change.

So what I did, I check for the captcha challenge popup when it appears I change the margins set by the material dialog in html tag like below.

checkForChallengePopup() {
    const html: HTMLElement = this.document.getElementsByTagName('html')[0];
    this.challengePopup = this.document.querySelector(`[title='recaptcha challenge']`);
    if (this.challengePopup) {
      this.challengePopup.parentElement.style.top = html.style.top.replace('-', '');
    } else {
      setTimeout(() => {
        this.checkForChallengePopup();
      }, 3000);
    }
  }

And yeah it keep on checking for the challenge pop-up till main dialog is not closed so kind a dirty but did the trick.