Changing ng-turnstile Width or Height

Question

I need to change the width of CloudFlare Turnstile to fit its parent's layout. However can't find a clean solution to change its IFrame. Is there a clean way to do it?

I am currently changing the width like this which seems to be a mess.

import { Renderer2 } from '@angular/core';

Then in my TS

ngOnInit(): void {
    this.turnsTileChange();
 }

turnsTileChange(): void {
    this.renderer.listen('window', 'message', (event) => {
      if (event.data.event !== 'init') {
        return;
      }

      const turnstileIframe = this.renderer.selectRootElement(`#cf-chl-widget-${event.data.widgetId}`);
      if (!turnstileIframe) {
        return;
      }

      this.renderer.setStyle(turnstileIframe, 'width', '90%');
      this.renderer.setStyle(turnstileIframe, 'height', '65px');
      this.renderer.setStyle(turnstileIframe, 'display', 'block'); // Changed to 'block' to ensure visibility
      event.stopImmediatePropagation();
    });
  }

My DOM

<ngx-turnstile [siteKey]="turnsTileSiteKey" [formControl]="turnsTileCtrl" theme="light"></ngx-turnstile>

Answer 1

If you are looking for css based solution, this works just fine :

:host::ng-deep ngx-turnstile iframe {
     width:90% !important;
     height:65px !important;
     display:block !important;
}