ListView item height

Question

By default, all items in ListView have the same height and you can easily specify that height from CSS. But in my case, sometimes i have 5 lines of text, sometimes just 1 line of text for listview items. Is there a way to make the height fluid - adjust to the amount of content in it?

Answer 1

In CSS if you don't specify the height attribute the content is fluid. You could instead specify a min-height attribute on the item class style so it doesnt break your layout if the content is empty.

Answer 2

Yep, but ListView is a predifined Windows 8 UI control and it has some predefined CSS styles.  Unfortunately height is one of them and you can't just "un-specify" it. So i solved my issue by just using good old <ul> <li> :)

Answer 3

Hi Dejan77,

By default, when you use Grid or List layout for the WinJS ListView control, it has the same size for all displayed items. Actually each item is displayed through an element decorated with ".win-container" CSS class (see the following reference for more info on listview styleing):

#Styling the ListView and its items (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx

for your case, if you want your listview items to fit the content size (based on the data source items bound to the listview), here are some means I can get so far:

1) Still use the default same-size listview style. You can make the listview item size to fit the largest possible item(by estimation) and make the entire item container has transparent background and border. Then, in each item, you can put an child element which has fluid layout and its size vary based on the content of the databinding source item.

2) The WinJS ListView control supports displaying items in different sizes under "Grid" layout. However, you need to define a base unit (height, width) and make sure all displayed items' size is the same or multiple of the base unit size. And then, you can use css style (specify through data binding) to control the actual size displayed for each ListView item. Here is the MSDN reference introducing on this:

#How to display items that are different sizes (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/jj657974.aspx

3) As you've already done, instead of using built-in WinJS controls,  you can just construct your own Html elements (either manualy via script) or use WinJS databinding approach.

 

#Data Binding in a Windows Store App with JavaScript
http://msdn.microsoft.com/en-us/magazine/jj651576.aspx

#Data binding (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/Hh758311.aspx

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 4

Thanks Steven, i am still new to Windows 8 development, so i somehow missed these things. Really good suggestions!