ListView Empty Template

6 posts, 1 answers
  1. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 30 Apr 2014 Link to this post

    This is sort of a follow up to this http://www.telerik.com/forums/listview-empty-template. I added a <div> under the listview but I want the "listview is empty" message centered in the screen horizontally and vertically between header and footer. What's the best way to accomplish this without mucking up the default Kendo UI styles? Thanks.

    JsBin is here http://jsbin.com/wizikulu/1/edit. 
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 May 2014 Link to this post

    Hi Jay,

    From the provided example appears you are using Kendo UI Mobile ListView while the forum thread is due to Kendo UI Web ListView. Please check the updated jsBin which demonstrates how to center the "listview is empty" message in the Mobile ListView.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 01 May 2014 in reply to Iliana Nikolova Link to this post

    Unfortunately, with the proposed solution, the vertical centering works only if the list has elements as the div height (100%) is based on the number of elements.

    What I need is for the div height to stretch across the content area between the header and the footer. I've updated the JsBin to show what I need to achieve by hardcoding an approximate height needed (500px).

    I was able to achieve the same programmatically using JavaScript but I'm wondering if there's a better solution using CSS and/or Kendo UI Mobile functionality.

    Thanks.
  7. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 01 May 2014 in reply to Jay Link to this post

    Updated JSBin is here
  8.
  9. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 05 May 2014 Link to this post

    Hello Jay,

    You can use calc or flexbox styles to span the listview container -- here is a jsBin that uses calc().

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 15 May 2014 in reply to Alex Gyoshev Link to this post

    That worked perfectly. Thanks!
Back to Top