locked
List View with 3 columns with vertical scrolling.

    Question

  • I am working with metro app with html5/javascript. so in my case I am taking 3 different div and type is list view. but I want to show 3 columns in  single div.

    html code is:- ther is data template and 3 divs in body tag.

    <body style="background-image: url(images/bg-premium.png)" >

        <!--item template-->
        <div id="main">
            <div id="ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;" >
                <div style="background-image: url(images/bg-flyer.png); color: black">
                    <div data-win-bind="title: category" ondblclick="detail(title)">
                        <table>
                            <tr>
                                <td>
                                    <h4 id="feedTitle" data-win-bind="textContent: title" ></h4>
                                </td>
                                <td>
                                    <img id="imgCat" src="#" data-win-bind="src: category; alt: category" />
                                </td>
                            </tr>
                        </table>
                        <h6 style="margin-left: 8px" data-win-bind="textContent: subtitle"></h6>
                        <table style="opacity: 0.5">
                            <tr>
                                <td>
                                    <h6 style="margin-left: 5px" data-win-bind="textContent: distance"></h6>
                                </td>
                                <td>
                                    <h6 id="feedPosted">posted:</h6>
                                </td>
                                <td>
                                    <h6 data-win-bind="textContent: posted"></h6>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="zoomElement" class="ManipulationContainer zoomElement" data-win-bind="title: category" ondblclick="detail(title)">
                        <img id="image" src="#" data-win-bind="src: image1; alt: src;"/>
                    </div>
                </div>
            </div>
            <header id="banner">
                <button id="backbutton" class="win-backbutton"></button>
                <h1 id="maintitle" class="win-title">WB Screen</h1>
            </header>
     
               
                 <!--Main Section-->
              
               <div id="articleLeft" style="float: left; text-align: left; margin-left: 10px" data-win-control="WinJS.UI.ListView" ondblclick="detail(title)"/>
                <div id="articleMiddle" style="float: left; text-align: left;" data-win-control="WinJS.UI.ListView"  ondblclick="detail(title)"></div>
                <div id="articleRight" style="float: left; text-align: left;" data-win-control="WinJS.UI.ListView"  ondblclick="detail(title)"></div>
          
        </div>
    </body>


    sandeep chauhan

    Friday, January 04, 2013 5:45 PM

Answers

  • Hi Sandeep,

    If you want to display three columns in a single div (in a single ListView control's item template?), then you can consider using the grid layout css position mode to define the layout of your ListView item template.

    The Grid layout can let you define the layout of a container element (such as <div>) as rows and columns and specify which row and column (cell) the certain child element (within the container element) should be positioned. For example, the following fragment is picked from the standard "Grid App" project template generated in Visual Studio 2012:

    ========================

    .groupeditemspage .groupeditemslist .item {
            -ms-grid-columns: 1fr;
            -ms-grid-rows: 1fr 90px;
            display: -ms-grid;
            height: 250px;
            width: 250px;
        }

            .groupeditemspage .groupeditemslist .item .item-image {
                -ms-grid-row-span: 2;
            }

            .groupeditemspage .groupeditemslist .item .item-overlay {
                -ms-grid-row: 2;
                -ms-grid-rows: 1fr 21px;
                display: -ms-grid;
                padding: 6px 15px 2px 15px;
            }

    ====================

    in the above sample css fragment, the ".item" class defines 2 rows and 1 column, and in its child elements, ".item-image" is positioned at row 1, column 1 (default values). And ".item-overlay" is positioned at row 2 column 1.


    #Grid Layout (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh453256.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, January 10, 2013 9:32 AM
    Monday, January 07, 2013 8:58 AM
    Moderator