WinJS List GridLayout header above list

Question

How to put header in listview with GridLayout. When I put header above listview my header take some height and last row in listview is not showed, because of header.

I also found a way to set header in listview directly:

data-win-options="{ header: select('.header') }"> 

With this my header is positioned on the left side of list, not above the list, like normal header should be. I did not see any example with listview GridLayout and header section above (for instance I wanna put search box and heading in header).

Any example of this ?

Answer 1

Two solutions are here:

1) This is answer I get from Microsoft:

In the list view the WinJS.UI.GridLayout's viewport is loaded horizontally. You need to change the viewport's orientation to vertical. You can do this by attaching the event onloadingstatechanged event.

args.setPromise(WinJS.UI.processAll().then(function () {
                listview.winControl.onloadingstatechanged = function myfunction() {
                    if (listview.winControl.loadingState == "viewPortLoaded")
                    {
                        var viewport = listview.winControl.element.getElementsByClassName('win-viewport')[0];
                        viewport.className = 'win-viewport win-vertical';
                    }
                }
            }));

and change the class win-horizontal to win-vertical.

2) Problem could be also solved adding standard html header and list below header, without data-win-options="{ header: select('.header') }" attribute.

In that case we need to calculate height of the list:

 .list {
    height: calc(100% - headerHeight);
 }