locked
ListView item height scale with wrap

    Question

  • How can I set the height of an item in a listview so that it scales based on if the text is wrapped?

    If I set up my listview like this, if the text string exceeds the width of the listview defined in my css3 file, the text wraps but with the height of each item set at 100%, the items are displayed on top of each other.

    <div id="goDutchListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div class="goDutchListTitleItem">
    <h2 data-win-bind="innerText: title"></h2>
    </div>
    </div>
    
    <!-- Defining the Go Dutch! list view template (uses list items defined above) -->
    <div id="goDutchListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemTemplate: select('#goDutchListIconTextTemplate'),
    selectionMode: 'none',
    tapBehavior: 'none', 
    swipeBehavior: 'none',
    layout: {type: WinJS.UI.ListLayout}}">
    </div>

    Note that if I set the following in my css3:

    .goDutchListTitleItem {
        height:60px;
    }
    I can hardwire the height of each item to 2 lines, but this is crude and inflexible.

    Thanks!

    S



    • Edited by sarrowsmith Thursday, November 22, 2012 5:29 PM
    Thursday, November 22, 2012 5:28 PM

All replies

  • Hi,

    Try to use two div to do that, for example:

    <div id="goDutchListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div class="goDutchListTitleItem">
    <h2 data-win-bind="innerText: title"></h2>
    </div>
    <div class="blahblah">
    </div>
    </div>
    


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Friday, November 23, 2012 10:04 AM
  • Hi,

    This didn't work for me...am I missing something? Should the text go into the "blahblah" class now or the h2 element? Should the divs be nested?

    Thanks for your input!

    S

    Sunday, November 25, 2012 12:41 AM