Make an inline style !important on a dynamic iframe

HTML & CSS
1

Hi,

I’m trying to embed a form from Beacon CRM. The form is embedded using JS which then generates the Iframe.

The problem i have is that the form is being cut off as there seems to be some class that is being applied with a !important tag. I’ve no idea where this comes from though as when i inspect it is pointing to a file that doesn’t seem to exist where it says it is?

The iframe code though does output as below with a height attribute, which appears to be correct.

<iframe src="https://example.beaconforms.com/form/xxxxxx?embed=true&amp;id=xxxxxx-xxxx-xx-xxxx;parent_url=https%3A%2F%2Fexample.com%2Ftest%2F" frameborder="0" scrolling="no" allow="payment" style="overflow: hidden; width: 100%; height: 1782px; border: medium; visibility: visible; user-select: none;"></iframe>

So I’m wondering is there a way to force the inline style to become !important? or some other thing I’ve missed.

Any help appreciated.

thanks

2

Don’t worry I’ve found where the class was being generated from. I’ve removed the !important so the inline style has taken priority and is showing correctly now.

3

You can force the iframe styles to apply with !important using JavaScript. While you can’t directly add !important to inline styles, you can do this:

const iframe = document.querySelector('iframe');
iframe.style.setProperty('height', '1782px', 'important');
iframe.style.setProperty('width', '100%', 'important');
iframe.style.setProperty('overflow', 'hidden', 'important');