PDA

View Full Version : [CLOSED-418] Content in IFrame in Panel Will Not Scroll



don_bm
8 Oct 2010, 1:12 PM
When placing an IFrame within a div in a popup panel (only way I could get the content from expanding to 100% height, the page doesn't scroll using touch. It scrolls if I use the mouse wheel in desktop Safari but on an iPad scrolling isn't possible (it tries to scroll the 'homeScreen' panel). Here's sample code:



Ext.setup({
onReady: function() {
var homeScreen = new Ext.Panel({
layout: 'fit',
fullscreen: true,
style: 'border: 5px solid #666666;background-color:#FFFFFF;background-image:none',
scroll: false,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Show Pop Up',
ui: 'action',
handler: function() {
this.iFramePanel = new Ext.Panel({
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
html: '<div style="width:100%;height:500px;overflow:auto;"><iframe src="http://www.sencha.com" style="width:100%;height:100%;overflow:auto;"></iframe></div>',
width: '97%',
height: '97%',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
xtype: 'spacer'
},{
text: 'Close',
ui: 'action',
handler: function() {
this.iFramePanel.hide();
},
scope: this
}]
}]
});
this.iFramePanel.show('pop');
},
scope: this
}]
}]
});
}
});

BrendanC
11 Oct 2010, 10:27 AM
Thanks for the bug report.

don_bm
17 Nov 2010, 8:05 AM
Any idea when this will be fixed?

SimonTemple
15 Dec 2010, 6:14 AM
I hit the same problem. If you need to embed an img element you can use the method discussed here: http://www.sencha.com/forum/showthread.php?114246-OPEN-491-0.98-overflowed-image-cannot-be-scrolled-any-more.&highlight=iframe

It 'sort of' works in 1.0.1, however, it's still not totally correct as you can't use pinch gestures.

You cannot scroll HTML iframe element content.

Does anyone have other workarounds for this issue... or maybe an update on when it will be fixed ;-)

Bucs
15 Dec 2010, 8:39 AM
Might be a dumb comment here but did you try to scroll the content in the iframe using two fingers on the desired panel on the iPad? That is how you have to scroll an HTML div section on iPad, otherwise your single finger swipe will scroll the whole page by default. Not sure how this works with an iFrame, but I will be needing to try this shortly on an app, so worth a shot.

kevinwmerritt
17 Dec 2010, 1:34 PM
Scrolling is also broken using an iframe in Chrome and an HP TouchSmart.

Jacky Nguyen
19 Dec 2010, 4:29 AM
Touch events fired on iframes are totally out of scope from the master window's listeners. The same thing applies with mouse events on desktop browser.

It's possible to bridge events between the current window and its iframes, yet things get much more complicated when the iframes don't satisfy same-domain-policy. Again this is not a touch-specific issue, but rather how it has always been with browsers. We may review this and decide whether we will support that in the future version.

MusiX
17 Apr 2011, 7:55 AM
Any news on this?

Thanks

face
29 Apr 2011, 3:23 AM
I found a great workaround if you control the contents of the iframe source. Simply put a scrolling panel inside the iframe document. Then it scrolls fine.

My iframe source is very lightweight and I didn't want to include all of Ext so I used iscroll-lite (only 12k) to do the scrolling in the iframe. I use this for a https secure login / signup in my http sencha app. (OT - the hardest part was communicating back to the parent document on successful login. For that I used third http iframe to make the cross domain javascript calls: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/).

antonccc
19 May 2011, 9:34 AM
@face

hi,

can you elaborate in your solution please?

face
19 May 2011, 12:58 PM
Have the iframe handle it's own scrolling events. The issue is that touch events can't be passed from the child frame to the parent frame. However, if the child frame knows how to scroll itself, everything works. You could load sencha touch in the iframe to handle it's own scrolling, or any other scrolling library. I used iscroll as it is very lightweight compared to sencha touch and my iframe didn't need any heavy js libraries. Basically think of the iframe as an independent app from the parent window.

antonccc
20 May 2011, 2:17 AM
Thanks face, iscroll works pretty well.

thinkadoo
2 Jun 2011, 8:35 AM
The best I've been able to do so far is adding the IFrame inside a Card Layout which then allows automatic Scrollbars to appear for the IFrame content in Desktop Safari and Google Chrome.

Back button works for IFrame content!

But on Mobile iOS and Android there is no scrolling of the IFrame content.

It would also be great to know how to remove the padding or margin which currently renders around the Iframe.

I don't know if any of this is possible, but it scrolls on Desktop Webkit just fine - even in AIR with the standard mode webkit control.

Application.views.Homeview = Ext.extend(Ext.Panel, {
title: "Home",
iconCls: "home",
layout: 'card',
items: [{
html: '<iframe src=\"http://www.google.co.za\" width=\"100%\" height=\"100%\">Your device does not support iframes.</iframe>'
}],
fullscreen: true,
dockedItems: [{
xtype: "toolbar",
title: "Home",
items: [
{
text: 'Reset',
handler: function(){
console.log("you clicked the Reset button");
Application.views.myHomeView.tab.setBadge("");
}
},
{
xtype: 'spacer'
},
{
text: 'Event',
handler: function(){
console.log("you clicked the Event button");
var hometab = Application.views.myHomeView.tab;
badgenumber = parseInt(hometab.badgeText);
nextnumber = isNaN(badgenumber) ? 1 : badgenumber+1;
hometab.setBadge(nextnumber);
}
}
]
}],
});

Ext.reg('homeview', Application.views.Homeview);

mysterydiner
18 Oct 2011, 9:02 AM
Have a div inside the iframe and use css for scrolling....

like so:

<div style="overflow: scroll;height: 100%;width: 100%;"></div>

If the iframe content is not yours, you could always frig it and inject the content into innerHTML perhaps?