windows-8 - 使 WinJS.UI.Flyout 向上展开

Question

我有一个WinJS.UI.Flyout我想在内容可见时向上扩展的内容。浮出控件的锚点位于屏幕底部。如果我flyout.show(anchor, 'top');首先调用它，它会正确显示，但在添加内容时会从屏幕底部展开。如果我称之为flyout.show(anchor, 'bottom');向上扩展，但它也覆盖了我不想要的锚元素。

Answer 1

This can be done by using -ms-flexbox display for the flyout and packing its content to the end.

flyout background can be set to transparent; it's size can be set to max possible; this way it serves as a outer container which aligns its content to the end. expandable content is placed inside another div flyout-content with background as white.

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