# HowTo resize iFrame to whole browser window

**URL:** <https://discourse.nodered.org/t/howto-resize-iframe-to-whole-browser-window/77427>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [10 April 2023 17:27 UTC](https://discourse.nodered.org/t/howto-resize-iframe-to-whole-browser-window/77427 "2023-04-10T17:27:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Moosbueffel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moosbueffel/32/36732_2.png) [@Moosbueffel](https://discourse.nodered.org/u/Moosbueffel)\
**Post date:** [10 April 2023 17:27 UTC](https://discourse.nodered.org/t/howto-resize-iframe-to-whole-browser-window/77427/1 "2023-04-10T17:27:52Z")

</div>

I found a [thread](https://discourse.nodered.org/t/website-embedded-in-dashboard/2965) here which told me how to show an url in a iFrame on my dashboard. I used the example flow there :).

This works fine, but I only find a way with fixed height and width. I wanted to use all availabe space on my screen. And this is different. Depending on the device. Also, if possible I want to support different url's to the template.

Searching for this problem is something for a specialist. I don't know html, css,... So can someone please help me with a example flow or the tags I have to use.

And the iFrame is always too small:

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b411de95d2063b7afc35ac4f24a9e542c6cefbd.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [10 April 2023 18:30 UTC](https://discourse.nodered.org/t/howto-resize-iframe-to-whole-browser-window/77427/2 "2023-04-10T18:30:30Z")

</div>

Width should be easy enough. I would guess that setting the iframe tag to have a class containing `width: 100%;` (or doing the same on a style attribute) would probably take care of that. Though sometimes you may need to make it slightly less than 100% to stop the browser generating extra scroll bars.

Height, I would have thought should be left on automatic unless you want to fix it to the view height - in that case, you may be able to make it `100vh`. Again, you might need to adjust somewhat to allow for other things on screen.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 April 2023 18:31 UTC](https://discourse.nodered.org/t/howto-resize-iframe-to-whole-browser-window/77427/3 "2023-04-24T18:31:19Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.