WinJS.UI.ListView horizontal

Question

Have a few items and want to display them horizontally and need them to wrap to next line when not enough space.

<div class="historyItem">
    <div id="testTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
        <div class="itemTemp">
            <h6  data-win-bind="innerText: desc"></h6>
        </div>
    </div>
</div>
<div id="listViewForecast"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{itemTemplate:testTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior:'none',  layout: {groupInfo: groupInfo, type: WinJS.UI.GridLayout}}"
    >
</div>

Now I'm not sure how to make it 'horizontal' but I know you should be able to do it as there is a property on ListView that returns a boolean if the list is horizontal here http://msdn.microsoft.com/en-us/library/windows/apps/br211788.aspx. I'm OK with using a GridView too but even that is displaying items vertically first.

Answer 1

Figured it out. Answer is here. Specify your own height for the ListView control and make it wider. Make sure it is only high enough to hold only one item and the next item will be thrown on the right. In my case, I have fixed number of items and will work fine. This may not work for variable number of items.

Just add the following class to your html and specify your width and height. All ListViews in your page are styled using this class.

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}