Flyout.alignment property

Gets or sets the default alignment to be used for this Flyout relative to its anchor element.

This value can be overridden by the alignment values passed in the show method.

Syntax

var alignment = flyout.alignment;
flyout.alignment = alignment;

Property value

Type: Object

right

The right edge of the Flyout is aligned to the right edge of the anchor element.

left

The left edge of the Flyout is aligned to the left edge of the anchor element.

center

The horizontal midpoint of the Flyout is positioned at the horizontal midpoint of the anchor element. This is the default value.

Remarks

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

The important thing to keep in mind is that the positioning of the Flyout is determined by both the placement and alignment properties.

  • When placement is set to left, right or autohorizontal, alignment settings are ignored since they place the Flyout to the left or right of the anchor element.
  • When placement is set to top, bottom or autovertical, alignment settings are always applied.
  • When placement is set to auto, the alignment value will be applied if the auto algorithm determines that the Flyout should be placed above or below the anchor. Otherwise, the alignment value will be ignored since this would position the Flyout to the left or right of the anchor element.
  • the show method can override these properties, but only for the instance where that show method is used.

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI

See also

Flyout

Placement

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