locked
Floating WinJS.UI.ListView elements in Windows 8 - HTML app

    Question

  • I am learning windows 8/HTML/JavaScript app creation. I am trying to create a WinJS.UI.ListView as described in the MSDN site.

    Now I have three listview elements and I want them to be placed on a single row. I tried used css float:left property to display them in one line.

    But the problem is I can't get them in a single line.

    HTML CODE

    <section aria-label="Main content" role="main"> <div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template"> <div class="iconTextApplications" > <img class="iconTextApplicationsImage" src="#" style="width: 100px; height: 100px;" data-win-bind="alt: title; src: picture" /> <div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div> </div> </div> <div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource, itemTemplate: select('#iconTextApplicationsTemplate'), layout: { type:WinJS.UI.CellSpanningLayout } }" > </div> </section>

    .win-container{
    	margin:auto;
    
    }  
    .win-surface {
    	width:100%;
    	margin: 0 auto;
    
    }
    .win-viewport {
    	width:100%;
    	margin: 0 auto;
    	background-color:rgb(94, 82, 68);
    	display:inline-block;
    }
    
    
    #iconTextApplicationsTemplate {
    	    float:left;
    		display:table-row;
    		width:100%;
    		height:100%;
    }
    

    Am I approaching it in the wrong way?

    or Should I go for other techniques?



    Monday, October 21, 2013 4:59 PM

Answers

  • It's typically much more reliable to just use a CSS grid in a div element (display: -ms-grid;), where you define three equal columns (-ms-columns: 1fr 1fr 1fr;). If the element has width: 100% as well, it will size to its immediate parent and give you simple adaptability across display sizes.

    Alternately you can use display: -ms-flexbox; with a -ms-flex-direction: row; on the parent element for the lists.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview


    • Marked as answer by RandomGood Tuesday, October 22, 2013 1:15 PM
    Monday, October 21, 2013 8:13 PM