Results 1 to 8 of 8

Thread: solution to get iframe scroll

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    61
    Vote Rating
    0
      0  

    Default Unanswered: solution to get iframe scroll

    We need to display pages from same domain within iframe..

    I have not been able to get iscroll or any approach to work to make the iframe content scroll

    Any pointers will really help..

    thanks,
    extjslikeit

  2. #2

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    61
    Vote Rating
    0
      0  

    Default scrolling still does not work on iframe within sencha touch ui

    The entire ui scrolls..

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19
    Vote Rating
    22
      0  

    Default Possible solution

    EDIT: Just realised why it worked was because it was using GET but it was an AJAX call so that's why it worked.

    On another note, has anyone tried adapting the ExtJS 4 iFrame components for Sencha Touch?

    :-)

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    33
    Vote Rating
    1
      1  

    Default

    Is there any solution on how to use scrollable iframes in 2.2?

  6. #6
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Hi, I had the same problem earlier, I have resolved it via cordova "InAppBrowser" plugin.More information can be found here : http://wiki.apache.org/cordova/InAppBrowser InAppBrowser requires cordova 2.3 or latter, for prior version please follow given link : http://a.shinynew.me/post/1978677538...Regards,Manish Kumar

  7. #7
    Sencha User
    Join Date
    Jan 1970
    Posts
    67
    Vote Rating
    0
      0  

    Default

    To scroll a div in an iframe simply put in CSS of that div:
    Overflow-y: auto;
    -WebKit-overflow-scroll: touch

    To scroll all content, wrap all content in a div.

    I used this technique in a web app

  8. #8
    Sencha User nareshkokkula's Avatar
    Join Date
    Feb 2012
    Posts
    45
    Answers
    1
    Vote Rating
    -3
      0  

    Default This may help you

    Code:
    Ext.define('Forms.MobileControls.Standard.EmbeddedPage', {
        extend: 'Ext.Component',
        xtype: 'embeddedpage',
    
    
        scrollable: {
            direction: 'both',
            directionLock: false
        },
    
    
    
    
        constructor: function () {
            this.callParent(arguments);
            this.on('painted', function () {
                $('#' + this._itemId).attr('style', 'display: inline-table; vertical-align: top; -webkit-overflow-scrolling : touch;overflow:auto; scrolling: auto;' + $('#' + this._itemId).attr('style'));
            });
    
    
    
    
        },
    
    
        initialize: function () {
            this.callParent(arguments);
            this.addEvents('ValueUpdated');
            this.on('painted',
        function () {
            Ext.DomHelper.append(this.element, {
                tag: 'div',
                style: 'width: 100%; height:100%; overflow:auto; -webkit-overflow-scrolling : touch; scrolling: yes;',
                children: [{
                    tag: 'iframe',
                    src: this.src,
                    id: this.id + '-iframe',
                    style: 'width: 100%; height:100%; overflow:auto; -webkit-overflow-scrolling : touch; '
                }]
            });
        });
        },

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •