Menu
So, I'm making a visual page that requires a grouped ListView that grows and shrinks variably, groups can get added or removed. Here's what I want it to look like (for reference)
The various listview items (mixes) are grouped nicely, and some run off the page. This is a pretty common design pattern in Windows Store apps.
Now, here's my problem: I can only get my ListView to display properly if the height and width properties are set to a definitive number of pixels, e.g.:
#myListView {
height: 700px;
width: 2000px; }
Setting height and width to anything like 100% or a value from calc() inevitably causes the ListView to not populate and not render. According to the Quickstart: Adding a ListView page on MSDN:
For a ListView to render, you must specify an absolute value for its height.
Which is all fine and good, except this app will be on various screens and will need to be a variable height. This is especially relevant since the ListView will scroll horizontally. I want the scroll bar to appear at the very bottom of the page, the way it is in the Store app.
I've tried resetting the height programmatically, but that didn't work. So, how can I get this ListView to render correctly on a variety of screens? Below is my HTML code for reference.
<div id="allMixesListView" data-win-control="WinJS.UI.ListView"
data-win-options="
{
itemTemplate: select('#myTemplate'),
groupHeaderTemplate: select('#myHeaderTemplate'),
layout: {type: WinJS.UI.GridLayout},
selectionmode: 'none',
itemDataSource: dummyData.placeholderData.dataSource
}"
class="myListView">
</div>
414
asked Dec 22 '25 16:12
It is perfectly possible to set the WinJS.UI.ListView to have height: 100%. However the layout that it is participating in, must also have some "defined" height. It doesn't need to be explicit (e.g. not 700px), but it does need to result in some definitive space.
Example; given this HTML:
<body>
<div>
<div data-win-control="WinJS.UI.ListView" style="height: 100%"></div>
</div>
</body>
The height of the DIV that the listview is on is not 100% of the page. It's 100% of the parent. Which has no height. So it sets itself as small as it needs to be. Ooops.
If you change the height from 100% to height: 100vh, then this layout will work because the height of the listview has been calculate to the point that the parent div takes up the space, and the ListView has some space to layout.
Note that the answer isn't strictly 'set it to 100vh'. It's "make sure that the layout has enough space to layout yours items". If you'd used a -ms-grid on the parent element, you'd have been set too (assuming rows, columns on that were set correctly)
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
