3. Onsen infinite list not working corrrectly

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen infinite list not working corrrectly


  • Hello,

    I’m trying to build infinite list but I don’t know why the result is not displayed correctly

    <!DOCTYPE html>
<hrml>
<head>    
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="../lib/jquery-3.1.0.min.js" language="javascript" type="text/javascript"></script>
  <script src="../lib/onsenui/js/onsenui.min.js"></script>    
  <script src="../lib/bootstrap-3.3.7.min.js" language="javascript" type="text/javascript"></script>
    
  <link rel="stylesheet" href="../lib/onsenui/css/onsenui.css" />
  <link rel="stylesheet" href="../lib/onsenui/css/onsen-css-components.css" />
  <link rel="stylesheet" href="../css/style.css" />      
  <link rel="stylesheet" href="../css/bootstrap.min.css">  

</head>
<body>
     <ons-page>
      <ons-toolbar>
        <div class="left"><a href="../index.html" style="text-decoration:none;"><ons-back-button id="back-button">Back</ons-back-button></a></div>
        <div class="center">Cats</div>        
        </ons-toolbar>        
        <div class="tab-bar tab-bar--top tab-bar--material">                
            <div style="color:white;font-weight:bold;text-align:center;" class="tab-bar__button tab-bar--material" id="divtitle">Cats</div>    
        </div>
<br />
      <ons-list>
    <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
  </ons-list>
</ons-page>
      <script>
    ons.ready(function() {

  var infiniteList = document.getElementById('infinite-list');

  infiniteList.delegate = {
    createItemContent: function(i) {
        var mdata="<div class='left'><img class='list__item__thumbnail'src='http://placekitten.com/g/40/40'></div>" +
                  "<div class='center'><span class='list__item__title'>Cutestkitty</span>" +
                  "<span class='list__item__subtitle'>OntheInternet</span></div>";
    
       return ons._util.createElement(            
        '<ons-list-item>' + mdata + '</ons-list-item>'
        
      );
    },
    countItems: function() {
      return 100;
    },
    calculateItemHeight: function() {
      return ons.platform.isAndroid() ? 48 : 44;
    }
  };

  infiniteList.refresh();
    });
    </script>
</body>
</hrml>

    0_1486921838293_00.jpg

    0 1 Reply
  • 侍

    @Ahmed-Elshorbagy Are you saying you don’t know why the height is not correct? It looks like everything is rendering other than height, which you have the calculated height function, so I assume you have tried modifying that.

    0

  • The height is not right ,yes. I have not tried to modify the height, do I have to modify the the height?

    0 1 Reply
  • 侍

    @Ahmed-Elshorbagy Yes, you have it saying if Android be 48 pixels high else 44. Try changing that to maybe 54 : 50. You can increment the numbers (the same amount for each) until you get what you want.

    1

  • I will try it, thank you.

    0
  • P

    Try without calculateItemHeight.

    From the docs:
    Should return the height of an item. The index is provided as an argument. This is important when rendering lists where the items have different height. The function is optional and if it isn’t present the height of the first item will be automatically calculated and used for all other items.

    1

  • @Piotr-Mitoraj Thank you

    0
  • Onsen UI

    That works if all your items have the same height. Otherwise, you need to provide a function calculating it. We just merged a new version of LazyRepeat where this should not be necessary anymore, it will be released soon :)

    2