What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

PRTG's Maps With Responsive Iframe

Votes:

1

How can I add responsive iframe in PRTG's maps, Map Designer using the custom HTML property.

https://www.paessler.com/manuals/prtg/maps_designer

custom-map iframe map map-designer maps

Created on Mar 14, 2017 12:42:24 PM

Last change on Mar 14, 2017 1:04:04 PM by Dariusz Gorka [Paessler Support]



Best Answer

Accepted Answer

Votes:

1

Map Designer - Custom HTML With Responsive Iframe

In Custom HTML Map Designer you can create a style class ( responsive ) to fit the external site within the Iframe window.

Map Objects Custom HTML

<style>#responsive { width: 395px; height: 240px; padding: 0; overflow: hidden; border: 1px solid black;  position:relative; top: 8px; left: auto;}#scaled-frame { width: 1000px; height: 600px; }#scaled-frame {    zoom: 0.35;    -moz-transform: scale(0.35);    -moz-transform-origin: 0 0;    -o-transform: scale(0.35);    -o-transform-origin: 0 0;    -webkit-transform: scale(0.35);    -webkit-transform-origin: 0 0;}@media screen and (-webkit-min-device-pixel-ratio:0) { #scaled-frame  { zoom: 0;}}</style>

<span id="responsive"> <iframe id="scaled-frame" src="https://www.paessler.com"></iframe> </span>

You can change the size of the external site inside the inframe by adjusting the scale

transform: scale(0.35)

https://www.paessler.com/manuals/prtg/maps_designer

Zarate Max

Created on Mar 14, 2017 2:20:01 PM

Last change on Mar 14, 2017 2:46:04 PM by Dariusz Gorka [Paessler Support]



8 Replies

Votes:

1

Hi there,

You might want to use the following responsive iFrame code, this way you can resize the Map-Editor box easily:

<iframe src="YOUR-URL" style="border:0px; position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>

Best regards

Created on Mar 14, 2017 1:03:55 PM by Dariusz Gorka [Paessler Support]

Last change on Mar 14, 2017 1:04:22 PM by Dariusz Gorka [Paessler Support]



Votes:

1

This way the external site does not fit inside the iframe window

<iframe src="YOUR-URL" style="border:0px; position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>

Created on Mar 14, 2017 1:28:17 PM



Votes:

0

Hi there,

Well if the side is not responsive, then it will not adapt to the size of the iFrame box. Please just increase the size of the iFrame box, does that work?

Best regards.

Created on Mar 14, 2017 1:46:57 PM by Dariusz Gorka [Paessler Support]



Accepted Answer

Votes:

1

Map Designer - Custom HTML With Responsive Iframe

In Custom HTML Map Designer you can create a style class ( responsive ) to fit the external site within the Iframe window.

Map Objects Custom HTML

<style>#responsive { width: 395px; height: 240px; padding: 0; overflow: hidden; border: 1px solid black;  position:relative; top: 8px; left: auto;}#scaled-frame { width: 1000px; height: 600px; }#scaled-frame {    zoom: 0.35;    -moz-transform: scale(0.35);    -moz-transform-origin: 0 0;    -o-transform: scale(0.35);    -o-transform-origin: 0 0;    -webkit-transform: scale(0.35);    -webkit-transform-origin: 0 0;}@media screen and (-webkit-min-device-pixel-ratio:0) { #scaled-frame  { zoom: 0;}}</style>

<span id="responsive"> <iframe id="scaled-frame" src="https://www.paessler.com"></iframe> </span>

You can change the size of the external site inside the inframe by adjusting the scale

transform: scale(0.35)

https://www.paessler.com/manuals/prtg/maps_designer

Zarate Max

Created on Mar 14, 2017 2:20:01 PM

Last change on Mar 14, 2017 2:46:04 PM by Dariusz Gorka [Paessler Support]



Votes:

1

Hey,

Thanks for your contribution, I wasn't aware of that option. Marked as best answer. ;)

Best regards.

Created on Mar 14, 2017 2:43:41 PM by Dariusz Gorka [Paessler Support]



Votes:

0

None of the above was any good for me. But here is the one that was most responsive for me:

What I did was this:
<div class="resp-container">
    <iframe class="resp-iframe" src="https://prtg.com" allowfullscreen></iframe>
</div>

Then add this to the CSS:

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.26%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

56,26% is due to ratio. (height 9 ÷ width 16). So If you have a map that is 1920x1080 then use this.

Created on Jun 17, 2018 9:15:02 AM



Votes:

0

When i change URL nothing is shown, what can be wrong? Remote web-sites must support this type of view?

Created on Oct 3, 2018 11:01:04 AM



Votes:

0

Hi there,

Is it possible that you try to embed a non HTTPS-Website within the secured HTTPS-Webinterface of PRTG?

Best regards.

Created on Oct 3, 2018 12:02:19 PM by Dariusz Gorka [Paessler Support]




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.