How is win-listview height set? - WinJS

Question

this is driving me up the wall. I cannot figure out how to make the listview's height automatic.

i.e. have the listview's height extend in order to occupy all the space it needs and have the outer container offer a overflow-y scroll feature.

I cannot seem to find any documentation on this unforuntately.

Help would be great. Thanks!

Answer 1

ListView controls are 400px tall by default. That's on line 1421 of the ui-light.css file. You can override it by adding a rule on your page like:

.win-listview { height: 100%; /* (or you can specify absolutely with something like '600px') */ }

On this page in the dev center it says...

Setting the ListView control's height

The ListView does not dynamically adjust its height to fit your content. For a ListView to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the ListView control's height to 400 pixels.

From a design standpoint, you probably shouldn't be doing vertical scrolling on a ListView. They're designed to be laid out horizontally (as are apps in general). Combining horizontal and vertical scrolling can make for an awkward user experience. I wrote some articles about this.