iFrame and CSS conflict

Status: 

In Progress

Priority: 

High

Test URL(s):

Frontend page: Future Students — -copy

Backend page: Backend editing interface

References:

Here is the info that provide from the CRM: Element451
==================================
The script you provided should work for embedding the iframe with a width of 100%. If it’s not displaying correctly, consider the following:

Parent Container: Ensure the parent container of the iframe is also set to 100% width.
CSS Conflicts: Check for any CSS rules that might be overriding the iframe’s width.
Responsive Design: If the page is responsive, ensure that media queries or other responsive design elements aren’t affecting the iframe’s width.
Inspect Element: Use browser developer tools to inspect the iframe and its parent elements to identify any constraints.
==================================

Request(s):

image.png

The form embeded on this page by inserting JavaScript codes in HTML element does not display in full width as expected

Frontend page: Future Students — -copy

Backend page: Backend editing interface

image.png

The JavaScript codes embeded in the HTML element at the bottom row:

<script>(function(){document.write('<iframe title="Apply 2025" frameborder="0" width="100%" height="1200px" src="https://embed-forms.451.io/?formId=fivebranches.forms.7710&apiUrl=https%3A%2F%2Ffivebranches.api.451.io%2Fv2%2F&accessToken=e3g6PjWAv6uzdwvAgyfLYwSWgf8ssh5s5XQMW1S0&featureToken=YLQHKRFCwQh48BHDgBrlvslq5BDOEG67rE35lYrd&analyticsToken=5GgvlBG7wy35V2St48NZO24MsW0rVJP7VIB17yzU&sourceUrl='+encodeURIComponent(window.location.href)+'"></iframe>');})();</script>

It was found that the form’s width is limited to max-width: 600px;

Leave a Comment

Active Tasks – Closed Tasks

Recent Comments

Recent 20 Comments

Preview page