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
-
The right edge of the Flyout is aligned to the right edge of the anchor element.
-
The left edge of the Flyout is aligned to the left edge of the anchor element.
-
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