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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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?


    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

    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

    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

    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.