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
    61
    Vote Rating
    0
    dishwashwebdesign is on a distinguished road

      0  

    Default Bottom Toolbar on Google Chrome iPhone Invisible

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,649
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm going to open this as a bug to see what we can do about it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    61
    Vote Rating
    0
    dishwashwebdesign is on a distinguished road

      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
    nicolaschaillan is on a distinguished road

      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
    magisnc is on a distinguished road

      0  

    Default Still not fixed in 2.2.1

    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
    eleftrik is on a distinguished road

      0  

    Default


    Is there some news about this issue? Thanks

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,649
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      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
    61
    Vote Rating
    0
    dishwashwebdesign is on a distinguished road

      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
    eleftrik is on a distinguished road

      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.