New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


PRTG's Maps With Responsive Iframe

Votes:

1

Your Vote:

Up

Down

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 by  Zarate Max (1,632) 5 5

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



Best Answer

Accepted Answer

Votes:

1

Your Vote:

Up

Down

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 by  Zarate Max (1,632) 5 5

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



8 Replies

Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  Zarate Max (1,632) 5 5



Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  Zarate Max (1,632) 5 5

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



Votes:

1

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  U5 (0) 1



Votes:

0

Your Vote:

Up

Down

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 by  Vasiliy (12) 1



Votes:

0

Your Vote:

Up

Down

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]



Please log in or register to enter your reply.


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.