WinJS List GridLayout header above list - html

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);
}