The web embed currently has fixed sizes. There’s a full, but it’s not actually full, ie 100%, but gets cut off and you need scroll inside.
I’d like a web embed that allows me to set it to 100% so my users don’t scroll inside.
The web embed currently has fixed sizes. There’s a full, but it’s not actually full, ie 100%, but gets cut off and you need scroll inside.
I’d like a web embed that allows me to set it to 100% so my users don’t scroll inside.
It’s not as easy as one may think from Glide’s perspective…or any web developer’s perspective for that matter. If I recall correctly, small/medium/large are predefined pixel heights for the web view component. Full, is predefined as well, but it’s based on viewport height (height of screen) instead of pixels. The problem is that a web embed is an iframe. An iframe needs to render itself on the screen before it can render the content inside of itself. Without knowing the height of the content beforehand, it’s not possible to know how tall to make the iframe before it’s rendered. I honestly don’t think there is an easy solution that glide could provide to make the web view height dynamically match the content height based on what I know.
I just recently posted about this and how I got around it. In my case, I needed the iframe height to dynamically adjust and I also needed the content inside the iframe to scale according to screen width so it would always fit width-wise. As the width of the screen changes, it also causes the height of the content to adjust, and as a result I needed the iframe to adjust it’s height as well. My solution was to build my own iframe (web view) component using the Custom AI component, which includes some javascript to dynamically handle the resizing of the iframe.
Here’s the catch though…I have full control of the html content that I’m showing inside of the iframe. What I have is javascript in my html that reports it’s content height to the iframe, and then the javascript include with the iframe receives that height and tells the iframe to adjust it’s height according to the value received. This all happens in real time as I adjust the width of my app. The problem is that it’s not a solution that will work for everyone as you need that extra bit of javascript inside the html that is being rendered inside of the iframe.
If you don’t have control of the html content being rendered inside of the iframe, then I don’t believe there is a way to dynamically control the iframe height. In that case, your best bet is to still use the Custom AI component to build an iframe, but you have to predefine the height you want in the prompt, or maybe make it a variable that you can dynamically set from a column value. If the content is longer than the iframe height, then you will still have to scroll, but if you make the iframe too tall, you will have empty space at the bottom. It all comes down to what you are trying to display inside of that iframe.