# Iframe does not size properly

**URL:** <https://discourse.nodered.org/t/iframe-does-not-size-properly/73285>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [6 January 2023 09:24 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285 "2023-01-06T09:24:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ale](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@Ale](https://discourse.nodered.org/u/Ale)\
**Post date:** [6 January 2023 09:24 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/1 "2023-01-06T09:24:58Z")

</div>

Hello everyone

I installed NodeRed on a Pi and have created a dashboard.  
Now I have the Problem that a webpage which I Embedd in an Iframe (as tab) does not size properly.

There are two scrollbars which seem to just move for a pixel and not really anything more.

If I change the size via devtools in the browser I can get rid of the scrollbars.

My question now is if it is possible to disable scrolling at all or if i can permanently change the size somewhere.

I cannot use an iframe as widget because I need it fullscreen.

(If you need any further information I can provide them this evening, just let me know)

Thank you all very much beforehand  
Greetings!

---

<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:** [6 January 2023 10:47 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/2 "2023-01-06T10:47:22Z")

</div>

> [@Ale](#):
>
> My question now is if it is possible to disable scrolling at all or if i can permanently change the size somewhere.

These are CSS questions. CSS lets you disable scrolling for any block element - you'd need to look up the details though as some settings might cause other effects. I usually just have to play with things until it looks right. The browser dev tools are great for this.

Similarly, resizing is mostly a matter of working out what CSS selector you need and adding that CSS to Dashboard.

---

<div class="post-metadata">

**Author:** ![Ale](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@Ale](https://discourse.nodered.org/u/Ale)\
**Post date:** [6 January 2023 10:49 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/3 "2023-01-06T10:49:19Z")

</div>

Thank you very much. I already thought so.

Are all CSS things added to it automatically overrides?  
Have never used css in node red and just occasionally elsewhere. 🙂

Do you have an example?

---

<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:** [6 January 2023 11:08 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/4 "2023-01-06T11:08:41Z")

</div>

> [@Ale](#):
>
> Are all CSS things added to it automatically overrides?

Not quite how CSS works - "C" being "Cascading". One of the things that catches people out regularly with CSS is its priority order. That can be a pain to wrestle with even for experienced users (I consider myself an overly enthusiastic amateur!)

CSS is generally applied in order of specificity of selector. So some CSS applied to a simple tag selector like `div` would be overriden by something with a selector of `div#myid` or `div.myclass` for example. You can also use the `!important` modifier to try and force things but that is generally best left as a final resort.

A `style` attribute applied to a tag would also generally take preference over a `class` applied to that tag.

Again, the browser dev tools shows you what is going on and lets you play with things dynamically.

So if you are using the `ui_template` node to load your iframe, you will have access to the tag itself and can simply apply a style attribute. If you are using a node to load the iframe though, you won't have direct access and would need to apply a class override.

In dev tools, select the element tab and click on the iframe tag. Then right-click and copy selector.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b12ee1268e4fb0822978baae534699bd96185216.png)

`#eltest-upd-4 > span` (yours will be different of course, that's just an example from one of my uibuilder test pages).

You can now put that into a ui\_template to be loaded into the `<head>`:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/9/3944674e0c96ff473c2587ed14883b5ddd8e2424.png)

---

<div class="post-metadata">

**Author:** ![Ale](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@Ale](https://discourse.nodered.org/u/Ale)\
**Post date:** [6 January 2023 22:24 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/5 "2023-01-06T22:24:26Z")

</div>

Hello there

I am experimenting now and found that adding overflow: none to the Div in the screenshot works.

But if I copy the selector and try to modify your code it does not work.  
You can see it at the top in the head section where it should be as you say.

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

NVM  
Got it to work by googling the right selector and learning a bit about them.

```auto
<style>
    .node-red-ui--inline-link {
        overflow: hidden;
    }
</style>

```

Seems to work so far.  
As it seems to add it to every page I hope I don't interfere with anything.

Thank you very much!

---

<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:** [6 January 2023 22:42 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/6 "2023-01-06T22:42:27Z")

</div>

> [@Ale](#):
>
> As it seems to add it to every page I hope I don't interfere with anything.

Remember that Dashboard is a single-page app - so there is only 1 page. The tabs are all on the same page.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 January 2023 11:57 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/7 "2023-01-07T11:57:40Z")

</div>

> [@Ale](#):
>
> As it seems to add it to every page I hope I don't interfere with anything.

you could possibly make it more specific by making it target `.node-red-ui--inline-link iframe ` ?

---

<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:** [21 January 2023 11:57 UTC](https://discourse.nodered.org/t/iframe-does-not-size-properly/73285/8 "2023-01-21T11:57:48Z")

</div>

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