CODEWITHSUNDEEP
windows-8winjs
Zachary Yaro
Zachary Yaro

Reputation: 306

Make WinJS.UI.Flyout expand upward

I have a WinJS.UI.Flyout that I would like to have expand upward when content is added to it while it is visible. The flyout's anchor is at the bottom of the screen. If I call flyout.show(anchor, 'top'); it appears correctly at first, but then expands off the bottom of the screen when content is added. If I call flyout.show(anchor, 'bottom'); it expands upward, but it also covers over the anchor element, which I do not want.

Upvotes: 1

Views: 306

Answers (1)

Sushil
Sushil

Reputation: 5535

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

Upvotes: 1

Related Questions