PDA

View Full Version : carousel sencha-touch.css bug v1.1



psenough
27 May 2011, 3:43 AM
found this very odd bug on android.
carousel panels would only show 1st and 4th element properly, 2nd and 3rd would be all white.
happens only when using sencha-touch.css from version 1.1
reverted back to 1.0 and everything was back to normal.

psenough
31 May 2011, 12:58 AM
tried android.css instead of sencha-touch.css but it has the same issue.
also occurs on google chrome, so it's not platform dependant i guess.

tried to figure out how to make a custom theme to see if i could find the culprit, but no luck so far resolving this issue.

anyone has any ideas on how to fix this?

psenough
31 May 2011, 2:16 PM
managed to figure it out. was not actually carousel's fault.
i was including several Ext.Containers as carousel items. and aparently in v1.1 only the first one is properly accepted / processed / rendered. the following ones are not. no clue if it's a bug or a feature but i just replaced it with Ext.Panel instead and all works fine.
i should really start using custom elements i guess.

rdougan
3 Jun 2011, 2:50 PM
Sounds odd. In theory it should work. Could you reproduce a simple test case?

Thanks.

psenough
4 Jun 2011, 4:51 AM
sure, here you go



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

function addCarouselPanel() {

var t1 = new Ext.Container({
items: [
{
html: 'hello t1'
}
]
});

var t2 = new Ext.Container({
items: [
{
html: 'hello t2'
}
]
});


//
// Panel Itself
//

var carouselPanel = new Ext.TabPanel({
iconCls: 'user',
title: 'test',
text: 'test',
cardSwitchAnimation: 'pop', //flip looks bad on android
fullscreen: true,
ui: 'light',
items: [
new Ext.Carousel({
iconCls: 'user',
title:'hello',
text: 'hello',
items: [
t1,
t2
]
})
]
});

}


//
// Starting Screen
//

var panel = new Ext.Panel({
fullscreen: true,
ui: 'light',
layout: {
type : 'vbox',
pack : 'center',
align: 'center'
},
modal: true,
items: [ new Ext.Button({
ui : 'confirm',
text: 'carousel with containers',
handler: function() {
addCarouselPanel();
},
margin: '10px',
width: '200px'
})
]
});

}
});


t1 content shows up 'hello t1'.
t2 is all blanks.

replacing the second Ext.Container by something else makes it show up.
So it's clearly a problem with multiple Ext.Containers being included on same item stack.

Since it only happens when changing css to latest version my guess is that it might be some css animation rules that aren't being applied to Ext.Container

jnadler
6 Oct 2011, 2:50 PM
I'm seeing the same issue. Were you able to resolve this? My first carousel panel shows up fine. Second card not shown, I verified the DOM elements are rendered but they are not visible in the carousel.

psenough
7 Oct 2011, 5:36 AM
I'm seeing the same issue. Were you able to resolve this? My first carousel panel shows up fine. Second card not shown, I verified the DOM elements are rendered but they are not visible in the carousel.

yeah, like i mentioned half way through the thread: using Ext.Panel instead of Ext.Container fixed it.

gulsan
7 Oct 2011, 7:00 AM
@psenough
I had the same problem. I didn't even get that it was a bug. After three hours, including building the app from scratch, I solved the problem the same way you did. If I only did see your thread back then I wouldn't have spent those three hours for nothing ..
Btw did you notice that you can at least catch a glimpse of the second item if you set the direction of the carousel to vertical. Really odd ...