Flyout.placement property

Gets or sets the placement to be used for this Flyout relative to the target object.

This value is overridden by the value of placement passed in the show method.

Syntax

var placement = flyout.placement;
flyout.placement = placement;

Property value

Type: Object

The placement of the Flyout relative to the anchor element.

top

Position the Flyout explicitly on the top of the anchor, resized to fit and adding scrollbar as needed.

bottom

Position the Flyout explicitly below the anchor, resized to fit and adding scrollbar as needed.

left

Position the Flyout left of the anchor, resized to fit and adding a vertical scrollbar as needed.

right

Position the Flyout right of the anchor, resized to fit and adding a vertical scrollbar as needed.

auto

Automatic placement such that the entire Flyout can be shown without being resized; typical placement is the vertical center of the display. If the Flyout fits above that centered anchor, then the Flyout is placed vertically in relation to the anchor, otherwise placement is horizontal. This is the default value.

autohorizontal

Automatic placement is limited to the left or right of the anchor element. A vertical scrollbar is added if necessary.

autovertical

Automatic placement is limited to the top or bottom of the anchor element. A vertical scrollbar is added if necessary.

Remarks

The placement specified doesn't mirror for right-to-left languages; left is always left and right is always right.

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI

See also

Flyout

Alignment

Menu

MenuCommand

Displaying popups

Laying out your UI

HTML flyout control sample

Designers

Command patterns

Flyout

Guidelines for flyouts

Context menu

Guidelines for context menus