Заголовок WinJS List GridLayout над списком

Как поместить заголовок в список с помощью GridLayout. Когда я помещаю заголовок над списком, мой заголовок занимает некоторую высоту, а последняя строка в списке не отображается из-за заголовка.

Я также нашел способ напрямую установить заголовок в списке:

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

При этом мой заголовок располагается в левой части списка, а не над ним, как должен быть в обычном заголовке. Я не видел ни одного примера со списком GridLayout и разделом заголовка выше (например, я хочу поместить окно поиска и заголовок в заголовок).

Любой пример этого?


html css winjs
person Milos    schedule 23.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Два решения здесь:

1) Это ответ, который я получаю от Microsoft:

В представлении списка область просмотра WinJS.UI.GridLayout загружается горизонтально. введите здесь описание изображения Вам необходимо изменить ориентацию области просмотра на вертикальную. Вы можете сделать это, присоединив событие 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-horizontal на win-vertical. введите здесь описание изображения

2) Проблема также может быть решена добавлением стандартного html-заголовка и списка под заголовком без атрибута data-win-options="{ header: select('.header') }".

В этом случае нам нужно вычислить высоту списка:

 .list {
    height: calc(100% - headerHeight);
 }
person Milos    schedule 31.05.2016