"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. Even if I add a style in a stylesheet to override everything I still don't know at that point what the height should be as it will change depending on what form I embed. 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"
An embedded Beacon CRM form creates an iframe whose visible height is being limited by a CSS rule using !important. The iframe element includes a height attribute, but the computed height is overridden by a stronger rule. Inline assignment via element.style.height cannot add !important. The parent page can apply !important to an inline style with element.style.setProperty('height', '500px', 'important') or element.setAttribute('style', 'height:500px !important;'). For variable heights, use a postMessage resizing protocol from the iframe to the parent or let the embed script supply dynamic sizing. Cross-origin iframes prevent the parent from reading inner content size directly, so provider-side resizing or a message-based API is required. Use MutationObserver to reapply overrides if the embed script repeatedly rewrites the iframe.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]