リストの上のWinJSリストGridLayoutヘッダー

Question

GridLayoutでlistviewにヘッダーを挿入する方法。 私はヘッダーをlistviewの上に置くと、ヘッダーのために私のヘッダーがいくらかの高さをとり、listviewの最後の行が表示されません。通常のヘッダがあるべきように、ではないリストの上に、これにより

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

私のヘッダーは、リストの左側に配置されている：

は、私はまた、直接リストビューのヘッダを設定する方法を発見しました。 上記のリストビューGridLayoutとヘッダーセクションの例は表示されませんでした（たとえば、検索ボックスを置いてヘッダーに挿入するなど）。

この例はどれですか？

Answer 1

2つの解決はここにある：リストで

がWinJS.UI.GridLayoutのビューポートが水平 をロードされ表示します。

1）これは私がマイクロソフトから入手答えです。 ビューポートの向きを垂直に変更する必要があります。 これを行うには、イベントonloadingstatechangedイベントをアタッチします。

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

win-horizo​​ntalをwin-verticalに変更してください。

2）問題は、データ・ウィン・オプションなしで標準のHTMLヘッダおよびヘッダの下のリストを、追加解決することができる=「{ヘッダ： 『ヘッダ』を選択し（）}」属性。私たちは、リストの高さを計算する必要があり、その場合には

：

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