ListView Empty Template

[Jay]

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. 

[Iliana Dyankova]

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

 

 

[Jay]

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.

[Jay]

Updated JSBin is here

[Alex Gyoshev]

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

 

 

[Jay]

That worked perfectly. Thanks!