You found a bug! We've classified it as TOUCH-4319 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    sandroferraz2013 is on a distinguished road

      0  

    Default Sencha tab bar bottom in google chrome browser iphone does't appear

    I'm new to sencha, I'm starting with a web app for ios and android but this example Kitchen Sink the tab bar bottom in google chrome browser iphone does not appear totally, anyone know why?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,412
    Vote Rating
    1103
    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

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    3
    Vote Rating
    0
    alpdog14 is on a distinguished road

      0  

    Default So how long does it seem this bug will take to fix?

    So how long does it seem this bug will take to fix?

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    sandroferraz2013 is on a distinguished road

      0  

    Default

    It is very important that this error is corrected because there are many users who use google browser on the iphone. When we have a solution?

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    wslbarnes@gmail.com is on a distinguished road

      0  

    Default Google Browser

    Hi guys

    Anything here yet? The browser is still not showing the tab at the bottom in Chrome on iPhone.

    Much appreciated.

  6. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ssotomayor is on a distinguished road

      0  

    Default Same issue here

    I'm having the exact same issue on Google Chrome for an iPad Mini, i noticed that the tabbar does show if i change the tabbar position to "top" or "left".

    Code:
            itemId: 'mainTabPanel',
            tabBarPosition: 'left', // here i change the tabbar position
            tabBar: {
                itemId: 'mainTabBar',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                }
            },
    but if i set it to "bottom" i am unable to see it.

    Does anyone know a quickfix ?

    Regards.

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ssotomayor is on a distinguished road

      0  

    Default

    Quote Originally Posted by ssotomayor View Post
    I'm having the exact same issue on Google Chrome for an iPad Mini, i noticed that the tabbar does show if i change the tabbar position to "top" or "left".

    Code:
            itemId: 'mainTabPanel',
            tabBarPosition: 'left', // here i change the tabbar position
            tabBar: {
                itemId: 'mainTabBar',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                }
            },
    but if i set it to "bottom" i am unable to see it.

    Does anyone know a quickfix ?

    Regards.

    So i've found a way around, i know it's dirty, but it worked out for me, in case of Chrome for iOS devices i've used this where "mainTabBar" is the id i assigned to the tabbar in the main view. You can use the proper string for each device if needed.

    Code:
            // hack for tablets with Chrome Browser to show tabbar
            if (navigator.userAgent.indexOf('CriOS') > -1) {
                Ext.ComponentQuery.query('#mainTabBar')[0].setStyle({
                    bottom: "4.55em",
                    position: "relative"
                });
            }
    Regards.

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    36
    Vote Rating
    2
    bjudson is on a distinguished road

      0  

    Default

    Also seeing this in Chrome for iOS 28.0.1500.16.

    Shouldn't you be able to apply the above styles using a CSS selector like (untested):

    Code:
    .x-chrome.x-ios .x-tabbar.x-docked-bottom {
        position: relative;
        bottom: 4.55em;
    }

  9. #9
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ssotomayor is on a distinguished road

      0  

    Default

    Yeah i guess you can, we actually changed the id for all the panel and moved the entire application up:

    Main:
    Code:
        config: {
            fullScreen: true,
            itemId: 'mainTabPanel',
            tabBarPosition: 'bottom',
            tabBar: {
                itemId: 'mainTabBar',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                }
            },

    Code:
                Ext.ComponentQuery.query('#mainTabPanel')[0].setStyle({
                    marginBottom: "4.55em"
                });
    I suppose you can try as you set it, i haven't tested it yet, but i do know this one works.

    Regards.

  10. #10
    Sencha User
    Join Date
    Sep 2009
    Posts
    8
    Vote Rating
    0
    jhamli01 is an unknown quantity at this point

      0  

    Default Fixed in Chrome 30

    I just retested this with Chrome 30 on iOS 7 and this is fixed, so it must have been a browser bug with Chrome.