3. calculateItemHeight and infinity lists with dynamic height

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.

calculateItemHeight and infinity lists with dynamic height

  • C

    Hello,

    Sorry for all questions I’ve been asking lately, really loving the onsen framework!

    Using Onsen 2.0. So I am listing events that include descriptions in an infinity list (ons-lazy-repeat). Sometimes descriptions run multiple lines, depending on resolution. The problem comes with calculateItemHeight. Is there no way to automatically calculate the height or have it auto-adjust based on my content? As far as I can tell, you must specify a fixed pixel height for every item. The problem is depending on the event description, user’s resolution, etc it’s near impossible to determine what that height should be. Any tips, tricks, ideas?

    Thanks

    0 2 Replies
  • Onsen UI

    @crankedcode Do you happen to have thousands or millions of events in your list? That’s the use case for lazy-repeat, when the DOM needs to handle a huge amount of elements. Otherwise, I don’t think lazy repeat is a good approach for other lists. If what you want to do is loading more items when you are near the bottom, check on-infinite-scroll property of ons-page. I made an example recently here (it uses AngularJS in this case).

    0

  • I use

        const devWidth = (window.innerWidth > 0 ? window.innerWidth : screen.width)

    with that i can calculate the height of my items. I use it here:

    nights.cool

    0
  • Onsen UI

    @crankedcode I got a version of lazy repeat working with dynamic heights. I need some time to test it with all the bindings and stuff but probably it can be added to Onsen UI :)

    0