Milos Milos - 6 months ago 26
CSS Question

WinJS List GridLayout header above list

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

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. enter image description here 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. enter image description here

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