How to get my iframe full height

Need help
1

Hello Bubble forum!

Today I am trying to make an iframe occupy its full height in content, but I have not been successful.

The following image shows my iframe, which is not displayed completely.

Screenshot_15
Screenshot_151387×716 41.3 KB

My page structure is something like this:

main page
- Group Content
  - Group Header
  - Group Get Signup bySlug
    - HTML Signup

This is the style of my HTML component:

Screenshot_20
Screenshot_20274×533 6.12 KB

Screenshot_19
Screenshot_19274×565 6.87 KB

This is the style of my container:

Screenshot_18
Screenshot_18279×702 8.56 KB

How can I make my iframe occupy all the space and adapt to the content?

2

there is a difference between 100 px, 100% and 100vh

I cannot see what you selected in the screenshot, but you can read about height and width here:

3

Is selected percent on the attribute. I’m thinking to add into css something like this if i don’t find a solution in bubble.

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
4

I guess you should add !important to your css before ;

5

Having this same issue. My height is set to 100% and I tested with another element (image) instead. Works fine. Something about the HTML element is not letting the dynamic height work correctly.

6

Apparently, the best way to resize the iframe is by using postMessage to send the height of the iframe content and capture it using JavaScript in Bubble, in order to subsequently change the size of the iframe and its container.