Weblog of Abdullah Rubiyath :: Alif

Exploring the Web: An apple a day

Sencha Touch 2 - Bottom tab bar shows blank icons on Android

May 9, 2012 -- alif

Recently, I have been working with Sencha Touch 2 for building Web/Mobile Apps. I came across an issue on Android. The Bottom Tab bars shows blank square icons on Android 4.x (ICS), but works fine on Android 3.x and 2.x. Below is a screenshot of how it looks like (bottom tab bar icons are blank):

Sencha Touch forum claims the issue has been resolved / fixed. However, I was still getting the same problem. Even disabling the animations didn't solve the problem for me. Finally, adding the following CSS lines fixed my problem.

.x-tabbar > * {
  z-index: 2;
}

I believe you can replace the z-index value with anything above 1 i.e 2, 3, 4 etc. should also work. '1' won't work properly. Here's my screenshot after applying the CSS fix:

I hope it helps someone out in similar situation.

Android
HTML-CSS
hybrid-app
javascript
oauth
Sencha Touch

Comments

Submitted by John (not verified) on

Thanks so much for fix. Its so frustating to see that Sencha has marked this bug as FIXED though its still present. The ticket needs to be reopened.

Submitted by alif on

I agree with you. I am not sure why it has been marked as 'fixed', even though the bug is still present on Sencha 2.0.0. I haven't tried on 2.0.1.

Glad I could be of help.

Submitted by alif on

I found that after applying this CSS fix, it solved my problem. I used it on Sencha Touch 2.0.0 and Android 4.x and earlier versions. What version of Sencha have you tried?. By tabs disappearing, are you implying that it didn't solve the problem or has this introduced another new problem?

Add new comment