Looking for a way to adjust the width of CloudFlare Turnstile to match its parent container's layout without causing any issues with the Iframe. Is there a more efficient method to achieve this?
The current solution I have seems to be messy:
import { Renderer2 } from '@angular/core';
Here is an example in my TypeScript file:
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();
});
}
In my HTML document:
<ngx-turnstile [siteKey]="turnsTileSiteKey" [formControl]="turnsTileCtrl" theme="light"></ngx-turnstile>