# iFrame width custom width and height

**URL:** <https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267>\
**Category:** Ask for Help\
**Created:** [June 28, 2023, 3:53pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267 "2023-06-28T15:53:58Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [June 28, 2023, 3:53pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/1 "2023-06-28T15:53:58Z")

</div>

Heya

I tried embedding an iframe, with \<iframe width=“80%” height=“1300” but it doesn’t work.

Is it not supported in Glide’s webview?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 29, 2023, 1:12am UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/2 "2023-06-29T01:12:24Z")

</div>

So first question should be without the width and height customizations, does your iFrame embedding work?

---

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [June 29, 2023, 6:54pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/3 "2023-06-29T18:54:47Z")

</div>

Yes it works but I need to scroll inside a window.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 30, 2023, 1:40am UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/4 "2023-06-30T01:40:36Z")

</div>

I would suggest using inspect element to see if the custom width and height are indeed applied. I assume you want a smaller window to save screen space, but I’m not sure that’s possible.

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 1, 2024, 3:04pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/5 "2024-03-01T15:04:39Z")

</div>

Hi there, any updates to this topic? i am facing the same issue too. How do i size it so i do not have to scroll in the embedded app?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2024, 3:23pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/6 "2024-03-01T15:23:39Z")

</div>

Have tried the different size settings?

 ![Screenshot_20240301-092242](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/8/0883c20b5daad53b84cbb6366d2b6e899c3e1b62.png)

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 1, 2024, 4:13pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/7 "2024-03-01T16:13:56Z")

</div>

Thanks, it did help that I dont have to scroll anymore.

However, there’s extra spacing at the bottom of the page, wonder if there’s any way / css code to remove this spacing? attached image

 ![image.png](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/579a96d6dfd1e768a4c6541be23d1214a4f269dc.png)

![]()

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2024, 4:17pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/8 "2024-03-01T16:17:50Z")

</div>

That’s not expected. Do you see that in the actual published app? Does it correct itself if you refresh the browser?

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 1, 2024, 4:33pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/9 "2024-03-01T16:33:23Z")

</div>

Hey Jeff,

Yes it’s still showing in my published app even after refresh. Attached an image.

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/19b950832c226ad5c596dca30fd92e800b36be71.jpeg)

Also, i was logged out and had to log back in my embedded app every time i close the app.

Thanks a ton for looking into this!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [March 1, 2024, 4:36pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/10 "2024-03-01T16:36:54Z")

</div>

Looks like you’re running the App in a browser. Is it any different if you actually install it?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2024, 4:38pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/11 "2024-03-01T16:38:06Z")

</div>

Definitely seems like a bug. If you add a spacer component below the web embed, it might work. Seems like the web embed CSS is hijacking the rest of the page.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2024, 4:40pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/12 "2024-03-01T16:40:29Z")

</div>

Just for further clarification…those tabs are in the main app and not the embedded app, correct? Looks like you are embeddeing a glide app inside another one??? Looking at it closer, I suspect the tabs are actually in the embedded app…

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 1, 2024, 4:47pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/13 "2024-03-01T16:47:38Z")

</div>

Hi Darren,

There’s no difference in the installed version of the app.

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 1, 2024, 4:52pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/14 "2024-03-01T16:52:46Z")

</div>

After adding spacer, still the same:

 ![image.png](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/f/9fabc5af6043d615c3ecd07849ffbb9cdbd1d1a3.png)

Yes the tabs you see at the bottom are from my embedded app.  
My main app does not have bottom tabs.

![]()

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2024, 5:31pm UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/15 "2024-03-01T17:31:29Z")

</div>

Hmm, I guess I’m not sure then. Not necessarily a bug. It’s just not common to see someone emded a Glide app inside a Glide app. The embed would have to know your device screen height before loading, and I’m not sure if that’s something Glide can easily fix or determine in the fly.

I think you would have to submit this to Glide support to see if they can even do anything.

You may need to attempt to apply CSS to the web embed component itself.

This kind of begs the question…why not have the user open the original app instead of embedding it inside another app? Not seeing any tabs in your portal app, does it do anything else other than show a web embed?

---

<div class="post-metadata">

**Author:** ![RyanTan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryantan/32/41225_2.png) [@RyanTan](https://community.glideapps.com/u/RyanTan)\
**Post date:** [March 2, 2024, 2:44am UTC](https://community.glideapps.com/t/iframe-width-custom-width-and-height/63267/16 "2024-03-02T02:44:20Z")

</div>

Thanks Jeff, i had submitted a ticket.

The portal app was meant for a closed group in my organisation, advisors, and has visibility options enabled.

It all started years when we had 2 apps, one client facing, one internal, as the data source were different.

Recently i rebuilt the client facing app into a glide page which had more features and i am now thinking for UIUX and a more streamlined process, to function with just 1 app instead. Thus the thought of embedding the advisor app into the client facing glide page.

Let me try out CSS but im a total newbie at that, is there a simple code i can add to remove the extra spacing? Thanks!