Geek Answers Handbook

Resize viewport in iFrame

I am trying to create a carousel in Sencha that displays iframes. The basic idea is that I have a bunch of HTML files that are already set up for viewing on the iPad.
Thus, the files have a viewport and everything is configured.

I created a simple carousel as follows:

var rootPanel; Ext.setup({ onReady: function() { rootPanel = new Ext.Carousel({ fullscreen: true, layout: 'card', items: [ { html: '<iframe src="http://localhost/file1.html">' }, { html: '<iframe src="http://localhost/file2.html">' }, { html: '<iframe src="http://localhost/file3.html">' }, ] }); } });

HTML files look like this:

 <!DOCTYPE html> <html> <head> <title>Untitled Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=1.0;user-scalable=no"> </head> <body> <div id="container"> <div style="margin:0;padding:0;position:absolute;left:0px;top:0px;width: 1536px; height: 2048px;text-align:left;z-index:0;"> <img src="image.jpg" style="width: 1536px; height: 2048px;"></div> </div> </body> </html>

The system view of the work, except that the viewport is not respected, and the inside of the iframe is not scaled as intended. Any idea?

+7
source share
2 answers

I am not familiar with sencha, but iframes are not able to set the height as a percentage (100%). Therefore, if sencha sets the width and height to 100%, it will not expand vertically, but must fill the parent font horizontally.

Is that what you see?

Try manually setting the iframe height to a sufficiently large size in px. If you have control over the contents of the iframe, you can add some javascript to communicate with the parent and tell it to resize accordingly.

0
source

Set 100% on iframe and internal html

 var rootPanel; Ext.setup({ onReady: function() { rootPanel = new Ext.Carousel({ fullscreen: true, layout: 'card', cls: 'some-cards', items: [ { html: '<iframe width="100%" height="100%" src="http://localhost/file1.html">' }, { html: '<iframe width="100%" height="100%" src="http://localhost/file2.html">' }, { html: '<iframe width="100%" height="100%" src="http://localhost/file3.html">' }, ] }); } });

And you css link something like this.

 .some-cards .x-innerhtml { height: 100%; }
0
source

More articles:


All Articles