Resize iFrame content according to the ignition view size

Ignition 8.1.5
I use an iFrame to display an external web page.
Can we force the content displayed inside the iFrame to be resized according the ignition view size ?

Hi @mazeyrat, I’m guessing you’re looking to apply some form of logic so that it scales in a particular way (so the normal grow/shrink, stretch, etc. isn’t sufficient)?

The only other way to interact with the external page via the iFrame component (that I am aware of) is to manipulate the URL in a way that the external website can interpret. For example:

My Iframe display a video with overflow slider.
Parent container and Iframe style seem to have ni effect on iFrame content

:thinking: my iFrame definitely stretches the external page to fit the contents of the iFrame (I’m on 8.1.4 though, just upgrading as we speak).

Can you confirm that the content of your external page is set to be responsive. The only time I have seen the iFrame not fill is when the external page is set to be a specific height/width.

@mazeyrat Have you ever found the solution? I have the same ‘problem’…

I doubt its possible with python. Even with javasript its hard working with iframes…
It all depends on the website in the iframe itself it if allows things. But even then you cant really work with it from python

OK, how can we then show in Perspective view some page, that customer company have on their local webserver? And it would not look ridiculously small on the 65" 4K monitor/TV?

uh wait what isnt working?
its the component self that stays small? or the content inside the component?

The content inside the iframe stays small… it doesn’t resize to the iframe size.

And if you watch their website in the browser (not in ignition just in chrome) on the big screen does it scale then?xd

No, it doesn’t…

Then its their website that is not responsive xd They will have to change their css for that

1 Like

Yeah… that will never happen…
So, there is no way to scale the content of the iFrame to the size of the iFrame?

you can try
put these styles in but it’s hard to make it dynamic from within ignition like this. and not sure it will even work

     zoom: 1.5;
     transform: scale(1.5);
    -moz-transform: scale(1.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1.5);
    -webkit-transform-origin: 0 0;
1 Like

OK, where do I put these…?

you can calculate the ration (1.5) with

i suppose in the iframe styles propery xd

1 Like

I put these into a style and then set classes to that style on iframe, but nothing… no change…

you dont need to use injection for this
(and you are using it wrong too)

if you want it with injection you have to put the classname first
but this way you wont be able to use a dyanmic scale with the page props…
} .psc-testIframe2_1{zoom…}{

Same, no difference…

you do need the - infront of the moz, o, webkit
But i doubt it will work anyways, since their website isnt responsive.

you can do it like this to put the - infront