Customer: Myranda Porritt
Org: Book Outlet
Org ID: 12cbceb6be9648e2a8a23b8c10684f0b
Customer priority: 5
Severity: 2
Content Page:
https://builder.io/content/4c19605af7fe4fb59ea06c3df2fe8190
https://builder.io/content/53adc6422d5d480a94be529bcf1712aa

# Context

- **A** Working page:
- https://bookoutlet.com/gift-guide
- https://builder.io/content/53adc6422d5d480a94be529bcf1712aa/edit
- Whole page is visible on full render
- Custom code in builder:

<script src="https://xd.wayin.com/ui/ngx.embed.min.js"></script>
<iframe
  src="https://xd.wayin.com/display/container/dc/b40cb1e9-0cfa-4a92-ad56-8f649030c9f3?mode=responsive"
  frameborder="0"
  scrolling="no"
  width="100%"
  height="3117px"
  id="ngxFrame186645"
  allowTransparency="true"
></iframe>

- **B** Broken page:
- https://bookoutlet.com/gifts-for-kids
- https://builder.io/content/4c19605af7fe4fb59ea06c3df2fe8190/edit
- Page is clipped
- Custom code in builder:

<script src="https://xd.wayin.com/ui/ngx.embed.min.js"></script>
<iframe
  src="https://xd.wayin.com/display/container/dc/7da7568e-8e9f-41e0-b8fe-7d85057dce61?mode=responsive"
  frameborder="0"
  scrolling="no"
  width="100%"
  height="100%"
  id="ngxFrame186649"
  allowTransparency="true"
></iframe>

- 

# Investigation

Customer embeds an `<iframe>` into Builder.io page. In case A the content renders correctly where as in case B the content gets clipped as shown above.

The reason for the clipping is that the the `<iframe>` is sitting in a `<div>` which receives height of `155px` and thus `100%` of `<iframe>` is still `155px`. Once the user interacts with the page custom JS executes which changes the `height` of `<iframe>` to `2398px`, which forces the `<iframe>` to be correct size.

The reason why the other page renders correctly, is because the custom code in the builder UI is setting `<iframe height="3117px">` (where as the broken page is setting `<iframe height="100%">`).

# Fix

To fix change the broken page custom `<iframe height="100%">` to `<iframe height="2398px">`.

# Resolution

This is not an issue with builder, but incorrect styles in the embedded site which forces the `<div>` into `155px`. Forcing the `<iframe height` to large value is just a work around to the issue. The proper fix is to understand why the page into which we are being embedded is making the `<div>` `155px`. It seems to be related to `flex` settings of the above elements.