Thank you for reporting this bug. We will make it our priority to review this report.
  1. #11
    Sencha User
    Join Date
    Apr 2011
    Posts
    2
    Vote Rating
    0
    face is on a distinguished road

      0  

    Default


    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.

  2. #12
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
    antonccc is on a distinguished road

      0  

    Default


    Thanks face, iscroll works pretty well.

  3. #13
    Sencha User
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
    thinkadoo is on a distinguished road

      0  

    Default Adding my vote for IFrame content Scrolling support on Mobile Webkit Browsers

    Adding my vote for IFrame content Scrolling support on Mobile Webkit Browsers


    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);

  4. #14
    Sencha Premium Member
    Join Date
    Jun 2011
    Location
    Nottingham, UK
    Posts
    24
    Vote Rating
    0
    mysterydiner is on a distinguished road

      0  

    Default Have a div inside the iframe and use css for scrolling

    Have a div inside the iframe and use css for scrolling


    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?

Similar Threads

  1. Replies: 16
    Last Post: 5 Apr 2010, 5:32 AM
  2. Resizing a content panel according to the Iframe within it
    By jyothsna in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 22 Feb 2010, 8:14 PM
  3. Open url in a panel with IFRAME
    By galdaka in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Oct 2007, 12:59 PM
  4. Complex Layout: IFrame or Content Panel?
    By zafiro in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jul 2007, 9:35 AM

Thread Participants: 10