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

让WinJS.UI.Flyout向上扩展

1 个答案: