Iframe does not size properly

Dashboard
1

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!

2

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.

3

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. :slight_smile:

Do you have an example?

4

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

#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
image693Ă—529 18.6 KB

5

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
grafik2879Ă—939 357 KB

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

<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!

6

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

7

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

1 Like
8

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