How can i set the viewlist width to fitted size when the viewlist items been loaded in the javascript+html5 metro app. RRS feed

  • Question

  • I have developed a metro app by using  javascript+html5, in the UI have a listview, but the listview width can not be set to   the fitted size, i do not went to set width to a fixed size because i don't  know how many items will be loaded. I have try to set listview width to auto but no way.

    I fund a method that can refresh the listview width to fitted size, when the mouse hover on the back button the UI refresh immediately then listview automatic set the width to fitted size, so how can i refresh the UI when XHR have been worked.

    Friday, September 28, 2012 3:37 AM

All replies

  • Could you post your code? By default, a ListView will take up as much space as it's allowed (horizontally). For example, a ListView inserted into a blank HTML app as a child of <body> will take up the entire width of the design surface.
    Friday, September 28, 2012 1:30 PM
  • css

    #Grid {
        display: -ms-grid;
        -ms-grid-rows: 140px 1fr;
        overflow-x: auto;
        -ms-grid-columns: auto auto;

        width: 100%;
        height: 100%;
        z-index: 0;  
        margin-left: 50px;
        margin-top: 50px;
        -ms-grid-row: 2;
        -ms-grid-column: 1;


    some code

                listView.oniteminvoked = this.itemInvoked.bind(this);
                listView.groupHeaderTemplate = listViewHeaderTemplate;
                listView.itemDataSource = groupedItemsList.dataSource;
                listView.itemTemplate = listViewTemplate;
                listView.groupDataSource = groupedItemsList.groups.dataSource;

                    function (request) {
                        var json = JSON.parse(request.responseText);
                        json.forEach(function (i) {
                                id: i.id,
                                name: i.name,
                                parent: i.parent


                        categoryGroupData = json;

                    function (request) {
                        return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));

    Saturday, September 29, 2012 2:39 AM