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

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    I'm going to open this as a bug to see what we can do about it.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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

    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

    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

    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 Premium User
    Join Date
    Apr 2009
    Posts
    48

    Default

    Is there some news about this issue? Thanks

  7. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    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
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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

    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

    Default

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

  10. #10
    Sencha Premium User
    Join Date
    Apr 2009
    Posts
    48

    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
  •