icons in tab bar not centered

[farbodr]

The icons on my tab bar don't seem to center-align. They look fine in safari on OSX but in the iOS simulator they remain left aligned. Here is the code snippet were I create the tab bar:

app.views.bottomBar = new Ext.TabBar ({                              
                                  id      : 'bottomBar',
                               dock    : 'bottom', 
                               defaults: {iconMask: true},
                               scroll    : 'horizontal',
                               layout  : {pack: 'center'}
                               
                        });

[mitchellsimoens]

You should use a remote debugger like weinre to inspect the DOM to see what is going on in CSS on the iOS device.

[farbodr]

After looking at it with the debugger it appears that there is an extra button with no image or text and it behaves like the home button on the tab bar. I've checked the code over and over and just can't see it.

This puts only two button in the tab bar. One has no image or title.

app.views.Viewport =         Ext.extend(Ext.TabPanel, {
                fullscreen: true,
                cardSwitchAnimation: 'flip',
                tabBar :app.views.bottomBar,
                items   :[{xtupe: 'homecard' ,  iconCls: 'home',     id:'home'}]
           });

Fred