This is a migrated thread and some comments may be shown as answers.

ListView Empty Template

5 Answers 122 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 30 Apr 2014, 07:55 AM
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. 

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 01 May 2014, 03:10 PM
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!
 
0
Jay
Top achievements
Rank 1
answered on 01 May 2014, 08:55 PM
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.
0
Jay
Top achievements
Rank 1
answered on 01 May 2014, 09:02 PM
Updated JSBin is here
0
Accepted
Alex Gyoshev
Telerik team
answered on 05 May 2014, 06:40 AM
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!
 
0
Jay
Top achievements
Rank 1
answered on 15 May 2014, 09:23 AM
That worked perfectly. Thanks!
Tags
ListView (Mobile)
Asked by
Jay
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jay
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or