1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    3
    amfailla is on a distinguished road

      0  

    Default Unanswered: Carousel images not showing on iPad

    Unanswered: Carousel images not showing on iPad


    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:

    Code:
    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:

    Code:
    {
                                                            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!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,651
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Did you debug your app? Use a remote debugger to inspect the DOM?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    3
    amfailla is on a distinguished road

      0  

    Default SOLVED!

    SOLVED!


    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