Win JS controls filling the page


  • Hi all,

    I am starting to learn app development using JavaScript and HTML using the WinJS library. I first started with a home page with some links. on clicking the link it takes you to a page where a Calendar for the year is displayed. I am using WinJS template binding for binding a months calendar.

    If I am using the list view I am not properly able to place the controls. For example, the I want to show 4 months in a row (3 rows in total). But the list view control does not take the full available size and because of that I have to use a table.

    What I want is a control which take full available width/height and re layouts element (template element) if size is changed (snapped view).

    For example, if size is available then it should be 4 months in row / else 2/3 in a row is view is snapped. also I do not want the template individual sizes to be set. they should dynamically take available size (though I would like to set the min. size).

    Is this possible. One way I see is using a table, but table give me a static layout and cannot be changed dynamically is view is changed.

    Any solutions for this / suggestions.

    - Girija

    Sunday, November 11, 2012 8:50 AM

All replies

  • HTML:
    <div id="myList" data-win-control="WinJS.UI.ListView"></div>

    #myList {
    /* The default height was 400px */
    height: 100%;
    width: 100%;

    My favorite way to solve these issues is to use either the DOM Explorer feature in Visual studio (same as F12 in IE) while using the simulator in Visual Studio so focus doesn't mess up.
    Then i can inspect elements.
    Alternative solution to this is to give colors to elements (red/yellow/green/blue/etc) and it helps me find out the size of elements and where the padding/margins are.

    • Proposed as answer by Cobra Tap Sunday, November 11, 2012 5:52 PM
    Sunday, November 11, 2012 5:52 PM
  • Hi,

    Setting the height and width 100% does not work. I am not able to see any templates. If I remove the style I am able to see all my template items but in a single row with a scroll bar (which I do not want).


    Below is my code :

    <div id="mListView"
                    itemDataSource: ItemsList.items.dataSource,
                    itemTemplate: select('#mTemplate'),
                    tapBehavior: 'directSelect',
                    selectionMode: 'none',
                    swipeBehavior: 'none', 
                    layout: { type: WinJS.UI.ListLayout }

    my javascript :

    (function () {
        "use strict";
        var item = WinJS.Binding.define({
            name: "",
    	// Other properties.....
        var items = new WinJS.Binding.List();
        WinJS.Namespace.define("ItemsList", {
            items : items
    var page = WinJS.UI.Pages.define("/Htmls/PageDemo.html", {
            ready: function (element, options) {
                var mCounter = 0;
                for (mCounter = 0; mCounter < 12; monthCounter++) {
                    var data = this.getData(mCounter);
    // push data into the Item source
    getData: function (counter) {
    // Data for the specific item is created on run time

    - Girija
    • Edited by Girija Beuria Sunday, November 11, 2012 9:03 PM changed code
    Sunday, November 11, 2012 9:02 PM