How can I add responsive iframe in PRTG's maps, Map Designer using the custom HTML property.
PRTG's Maps With Responsive Iframe
Votes:
1
Best 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>
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.
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.
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.
Votes:
0
When i change URL nothing is shown, what can be wrong? Remote web-sites must support this type of view?
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.
Add comment