ListView item is always at 44px

Question

So i have a listview:

<div id="ListV" style="height:100%;" data-win-control="WinJS.UI.ListView" data-win-options="{ layout: { type: WinJS.UI.ListLayout }}">

And a Template:

<div id="Template" data-win-control="WinJS.Binding.Template" style="margin:10px;">
                
                <div style="text-align:right;">
                    <span data-win-bind="innerText: Number" style="font-size:x-large;color:rgb(99, 127, 137);" ></span>
                    <span id="AT"  data-win-bind="innerText: Text" style="font-size:xx-large;color:purple;" ></span>
                </div>
</div>

And some Code:

ListV.winControl.itemDataSource = arr.dataSource;
ListV.winControl.itemTemplate = Temp;

But ever time, the height of an item of the listview is always 44px. The problem is, sometimes the Text is only one line and sometime its 30 lines, so the height is dynamic. I want it to be the size of the text. Why does it always choose a height of 44px? 

Answer 1

Hi,

Please have a debug as: http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail]
Microsoft One Code Framework

Answer 2

Yeah, the height thing is frustrating. It appears to do some sort of "peek" on your first element and use that height if you don't explicitly specific a height in your template. Using height: auto or height: 100% just doesn't work.  If you look at the markup, they are using absolute positioning and setting up each row that way.

I.E.

Row 1 is top: 0, Row 2 is top: 44px, Row 3 is top: 88px ,etc.

About the only thing you can do is explicitly set your heights in the templates and then pick your template based on calculating how much space you need, but obviously this is a pain.  This is a somewhat helpful, if overly simplistic sample:

http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f