Сделать WinJS.UI.Fly развернуть вверх

Question

У меня есть WinJS.UI.Flyout, что я хотел бы расширить вверх, когда контент будет добавлен к нему, пока он будет виден. Якорь вылета находится в нижней части экрана. Если я вызываю flyout.show(anchor, 'top');, он сначала отображается правильно, но затем расширяет нижнюю часть экрана при добавлении контента. Если я вызываю flyout.show(anchor, 'bottom');, он расширяется вверх, но он также перекрывает элемент привязки, который я не хочу.

Answer 1

Это можно сделать с помощью дисплея -ms-flexbox для всплывающего окна и упаковки его содержимого до конца.

всплывающий фон может быть установлен на прозрачный; его размер может быть установлен максимально возможным; таким образом, он служит внешним контейнером, который выравнивает его содержимое до конца. расширяемый контент помещается внутри другого div flyout-content с фоном как белый.

<div data-win-control="WinJS.UI.Flyout" id="flyout"> 
    <div class="flyout-content"> 
     expandable content here 
     expandable content here 
     expandable content here 
     expandable content here 
    </div> 
</div> 

CSS:

#flyout 
{ 
    background-color: transparent; 
    border: 0; 
    display: -ms-flexbox; 
    -ms-flex-pack: end; 
    -ms-flex-direction: column; 
    height: 400px; 
} 

.flyout-content 
{ 
    padding: 20px; 
    background-color: white; 
}