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.
"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"
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]