Carousel images not showing on iPad

[amfailla]

Hi

I have a carousel that is loaded with some <img> in html depending on certain user's selections.
It all works perfectly fine when I try on Safari (MacOSX) and any other browser that is not mobile!

When i try the app on mobile safari, the images are not loaded BUT i can see that they are kinda fetched since i can see the carousel indicator at the bottom of the carousel!

Below, the code i use to do the above:

var prodStore=Ext.getStore('productsStore');
var prodRec=prodStore.findRecord('productName',newValue);
if(prodRec!==null){
    var imgSto=Ext.getStore('imagesStore');
    var rec=null;
    imgSto.clearFilter();
    imgSto.filter('productID',prodRec.data.id);
    imgSto.load(function() {
        if(imgSto.getCount()>0){
            var items = [];


            for(var i=0; i<imgSto.getCount(); i++){
                var image=imgSto.getAt(i);
                if (!image.get('imageFile')) {
                    return;
                }


                items.push({
                    xtype: 'container',
                    fullscreen:true,
                    id: image.get('imageFile'),
                    itemId: 'IMG'+image.get('imageFile'),
                    html: '<img name="prodImage" id="'+image.get('productID')+'" src="http://myurl.com/images/'+image.get('imageFile')+'" height="100%" width="100%">'
                });
            }
            Ext.getCmp('crsProdImage').setItems(items);
            Ext.getCmp('crsProdImage').setActiveItem(0);
            Ext.getCmp('crsProdImage').doLayout();
        }
    });   
}

Below, the carousel config:

{
                                                        xtype: 'carousel',
                                                        flex: 3,
                                                        height: '97%',
                                                        id: 'crsProdImage',
                                                        itemId: 'crsProdImage',
                                                        left: '1.9%',
                                                        style: 'border: 4px solid black;',
                                                        width: '66%'
                                                    }

I am using an iPad latest model - maybe a bug??!


Thanks for any help!

[mitchellsimoens]

Did you debug your app? Use a remote debugger to inspect the DOM?

[amfailla]

The issues was simply due to the fact that i was setting a height in % in the img tag and this was causing the whole img to not show at all :S - solved now!

THanks