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

Article Comments

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


Mar, 2017 - Permalink

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>


Mar, 2017 - Permalink

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.


Mar, 2017 - Permalink

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


Mar, 2017 - Permalink

Hey,

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

Best regards.


Mar, 2017 - Permalink

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.


Jun, 2018 - Permalink

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


Oct, 2018 - Permalink

Hi there,

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

Best regards.


Oct, 2018 - Permalink