Blank icons in tabbar if container has scrollable set to true

[fhellwig]

REQUIRED INFORMATION

Ext version tested:

• Sencha Touch 2.0.1rc

Browser versions tested against:

• N/A (Native Android App)

DOCTYPE tested against:

• html

Description:

• Any container in another container having a bottom-docked tabbar with the scrollable config value set to true causes the tabbar icons to appear as blank squares in Android 4.0.3. This manifested itself when I was adding a dataview (list) since that overrides the container's scrollable default value of null.

Steps to reproduce the problem:

• Create a container with a bottom-docked tabbar. Add a dataview (or any container with scrollable: true.

The result that was expected:

• Tabbar icons should appear correctly.

The result that occurs instead:

• Blank squares appear.

Test Case:

// Add this to the items of any container with a tabbar having icons
// and deploy to Android 4.0.3 (it will correctly work in a browser).
{
    xtype: 'dataview'
}

// or even...
{
    xtype: 'container',
    scrollable: true // this is what the dataview class does
}

Screenshot or Video:

• Others have posted various screen shots in similar reports.

See this URL for live test case: none

Debugging already done:

• No additional debugging as to why this occurs was performed.

Possible fix:

• Set scrollable to false when adding a dataview to a tab panel. This must be done to dataview even if they are nested in sub-containers.

Additional CSS used:

• None

Operating System:

• Android 4.0.3 (emulator)

[mitchellsimoens]

So something like this?

new Ext.tab.Panel({
    fullscreen : true,
    tabBar     : {
        docked : 'bottom'
    },
    items      : [
        {
            xtype      : 'container',
            title      : 'Test',
            scrollable : true
        }
    ]
});

[m3m3nto]

I'm facing the same problem but I couldn't find a solution (or a work around). The "possible solution" doesn't work. So what is a possible fix?

[troels]

I think the example has to be a little more elaborate to trigger the error:

Ext.define('app.view.Main', {
    extend: 'Ext.Panel',


    config: {
        items: [
            {
                xtype: 'tabbar',
                docked: 'bottom',
                items: [
                    {
                        title: 'Start',
                        html: 'Start',
                        iconCls: 'home',
                    }
                ]
            }, {
                xtype      : 'container',
                title      : 'Test',
                scrollable : true
            }
        ]
    }
});

This is what causes the error in my case. As you see, the items in the tabbar has to have an icon mask with iconCls before the error is visible.

More details can be seen in this parallel case: http://www.sencha.com/forum/showthread.php?182171-Beta-3-Toolbar-Icons-not-rendering-on-Tabbar-in-Android-4.0&p=761940#post761940

[mitchellsimoens]

I'm not seeing why adding the container with scrollable is doing anything to the tabbar. If the icon is a blank square that means the browser doesn't support webkit mask CSS.

[troels]

Me neither, but none the less.

The code I submitted should render with this error. The reason I know it works before adding the scrollable component is because in my code, I use a card layout for the main container and have no additional items besides the tab bar. Upon setting first view active, the masks turn from icons to squares.

As for what Google can tell me, nobody has any clue why this stopped working in android 4 (browser 4.0.3 henceforth).

[ingo.hefti]

same issue when I pack the app for android and let it run on my Nexus Galaxy (ICS). there are 3 views on the tab bar. all of them set to scrollable. result=no icons on the tab bar. when I set the 1. view to scrollable=false, then I get the icons on the tab bar. however switching to another tab will make them disappear. coming back to the 1. tab will make them reappear. the same app works fine on an older HTC Desire with 2.3.1.

[RossGerbasi]

I am also having the same issue when using a Map on android. I have not confirmed it has to do with the scrollable property but I currently have 5 tabs. When i switch to map all the icons go "missing" to the box shape. When i switch to any other tab they come back.

Again this is on android i am running 2.3.6 and Sencha RC 1. Very frustrating any workarounds???

-ross

[Jamie Avins]

Sounds like there's still some issues in 4.0.3 with webkit masks and transforms. We'll see what we can do to work around this issue.

[landed]

I can confirm I have this issue. for me setting scrollable makes the icons go square, fine on android and in the pc browser webkit.
I was thinking of setting an image manually but no joy. I think my css is wrong.

.x-tab .x-button-icon.charty,
.x-button .x-button-icon.x-icon-mask.charty {
/*-webkit-mask-image: url('http://cambs.eu/mobile01/img/charty.png');*/
-webkit-mask-box-image: url('http://cambs.eu/mobile01/img/charty.png');
}

I feel it has to do with the tabbar sizing ever so slightly as I can see the icon title shimmer a bit. I also isolated the code to the scrollable setting on the view. So removing that and all is well. Just of interest the icons go to blocks mid animation between tabs then on a tab that has no issues all the icons display again.

One other thing to note is that I am having usually to set the width or height as a fixed pixel size for the scroll to work this could cause the tabbar to slightly adjust its own size ? hence the flicker on the texts.

I'm using 2.0.0 gpl version.