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.
Comments
Thanks a lot for this
Thanks a lot for this information Alif, this saved us hours of upgrade and messing around with Sencha installations.
Nice workaround. Thanks so
Nice workaround. Thanks so much!
But now the tabs dissapear on
But now the tabs dissapear on android?
I found that after applying
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?
Works great! Thanks a bunch.
Works great! Thanks a bunch.
Add new comment