Onsen UI list Items with dynamic height



  • Hi All,

    I am developing an application which shows images from Instagram in ons-list (each image in one ons-list-item). Each image has different height. I set list item height in dynamically and its working. But my problem is there is gap between two list items.I attached sample screen shots.

    Thank You. :):smiley:

    0_1461562253606_Screenshot_2016-04-25-10-56-07.png
    $scope.loader = {

                configureItemScope: function (index, itemScope) {                   
    
                    itemScope.canceler = $q.defer();
    
                    itemScope.item = {                       
                        user_name: $scope.instagram[index].user.username,                       
                        image: $scope.instagram[index].images.standard_resolution.url,
                        image_height: $scope.instagram[index].images.standard_resolution.height,                        
                    };
                },
                calculateItemHeight: function (index) {
                 
                    return $scope.instagram[index].images.standard_resolution.height + 80;
                },
                countItems: function () {
                    return $scope.instagram.length;
                },
                destroyItemScope: function (index, itemScope) {
                    itemScope.canceler.resolve();
                }
            };


  • Hi @poorna-soysa.
    The example which you are posting isn’t really easy to debug in it’s current state. If you want you could try to make a codepen and then it will be easier to debug.
    From the code which you’re showing the only thing we could suggest is changing the calculateItemHeight function. Currently it’s

    calculateItemHeight: function (index) {
        return $scope.instagram[index].images.standard_resolution.height + 80;
    },
    

    If the gap is a constant for each element then maybe you should remove or change the + 80.

    The other option would be if the size which you are getting is just the image size, but it’s not taking the screen size into consideration.

    If that’s the case you could try to do something like

    var screenWidth = window.innerWidth;
    

    and then

    calculateItemHeight: function (index) {
        var sizes = $scope.instagram[index].images.standard_resolution;
        return sizes.height * (screenWidth / sizes.width) + 80;
    },


  • Hi @IliaSky ,

    Thanks for replying and second option is working fine. And again thanks for support .
    :thumbsup: :thumbsup:
    :thumbsup:
    :thumbsup:

    Cheers.



  • Hello everyone, Can anyone help me to subit form data into API in monaca ?



  • @Heartless_Slayer

    Can you describe your issue in detail? :)

    Cheers.


Log in to reply