Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Bottom Toolbar on Google Chrome iPhone Invisible

    You found a bug! We've classified it as TOUCH-4560 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    64
    Vote Rating
    0
      0  

    Default Bottom Toolbar on Google Chrome iPhone Invisible

    For some reason the bottom docked Toolbar will not be displayed on Google Chrome 26.0.1410.53 and iPhone5:

    Code:
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    scrollable: null,
                    ui: 'neutral',
                    defaults: {
                        iconMask: true,
                        ui: 'standard'
                    },
                    items: [
                        {
                            xtype: 'spacer'
                        },
                        {
                            iconCls: 'trash',
                            action: 'doResetSearchForm'
                        }, 
                        {
                            xtype: 'button',
                           text: 'submit',
                            action: 'doSubmitSearchCarForm'
                        },
                        {
                            xtype: 'spacer'
                        }
                    ]
                },
    This item setup is within a card view tab.Panel.
    In Chrome Desktop version the bottom toolbar works fine. In Chrome for android the toolbar works also fine.

    I guess it must have something to do with the parent/child fullscreen: true setting.
    Any hints?

    All used components (slidenavigation, listviews, searchforms) seem to have the same problem only on Chrome iOS. The bottom value seems to be around 40px too low. Any ideas?

    test case
    Code:
    Ext.Viewport.add([
        {
            html : 'toolbar is present but cannot see it'
        },
        {
            xtype  : 'toolbar',
            docked : 'bottom',
            items  : [
                {
                    text : 'foo'
                },
                {
                    text : 'bar'
                }
            ]
        }
    ]);
    Last edited by mitchellsimoens; 5 Jun 2013 at 5:03 AM. Reason: added test case

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,316
    Vote Rating
    1290
      0  

    Default

    I'm going to open this as a bug to see what we can do about it.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    64
    Vote Rating
    0
      0  

    Default

    thanks for the feedback.
    i tried this workaround in the toolbar config:
    Code:
    bottom: Ext.browser.name === 'Chrome' && Ext.os.is.iOS ? '40px' : null,
    does not work cause IOS Chrome is sending 'Other' as Useragent.

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    I'm going to open this as a bug to see what we can do about it.
    This is a very serious bug that impacts a lot of users, is there any news on fixing it?

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default Still not fixed in 2.2.1

    Hi,

    Just to mention that this page does not display properly in Chrome / IOS :

    http://docs.sencha.com/touch/2.2.1/t...bs2/index.html

    Can anyone confirm a fix is under process ?

  6. #6
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Is there some news about this issue? Thanks

  7. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,316
    Vote Rating
    1290
      0  

    Default

    This looks to be an issue in Chrome for iOS: https://code.google.com/p/chromium/i...tail?id=229817

    Star it up!

    We are looking at ways to get around the issue but things are a bit ugly with what we have tried so far.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Here's a workaround, let us know if you have issues with it:

    Code:
    Ext.define('Ext.env.ChromeiOS', {
        override: 'Ext.env.Browser',
        statics: {
            browserNames: {
                ie: 'IE',
                firefox: 'Firefox',
                safari: 'Safari',
                chrome: 'Chrome',
                opera: 'Opera',
                dolfin: 'Dolfin',
                webosbrowser: 'webOSBrowser',
                chromeMobile: 'ChromeMobile',
                chromeiOS: 'ChromeiOS',
                silk: 'Silk',
                other: 'Other'
            },
            engineNames: {
                webkit: 'WebKit',
                gecko: 'Gecko',
                presto: 'Presto',
                trident: 'Trident',
                other: 'Other'
            },
            enginePrefixes: {
                webkit: 'AppleWebKit/',
                gecko: 'Gecko/',
                presto: 'Presto/',
                trident: 'Trident/'
            },
            browserPrefixes: {
                ie: 'MSIE ',
                firefox: 'Firefox/',
                chrome: 'Chrome/',
                safari: 'Version/',
                opera: 'OPR/',
                dolfin: 'Dolfin/',
                webosbrowser: 'wOSBrowser/',
                chromeMobile: 'CrMo/',
                chromeiOS: 'CriOS/',
                silk: 'Silk/'
            }
        }
    });
    
    Ext.define('Ext.viewport.ChromeiOS', {
        onReady: function() {
            if (this.getAutoRender()) {
                this.render();
            }
            if (Ext.browser.name == 'ChromeiOS') {
                this.element.setStyle({
                this.setHeight('-webkit-calc(100% - ' + ((window.outerHeight - window.innerHeight) / 2) + 'px)');
                });
            }
        }
    });

    Sencha Inc

    Jamie Avins

    @jamieavins

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    64
    Vote Rating
    0
      0  

    Default

    This seems to do the trick also:
    Code:
    viewport: {
        autoMaximize: true
    },

  10. #10
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by dishwashwebdesign View Post
    This seems to do the trick also:
    Code:
    viewport: {
        autoMaximize: true
    },
    In my project autoMaximize was already true, it doesn't seem to work.

Page 1 of 2 12 LastLast

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
  •