Alignment
The RadFloatingActionButton exposes the Align
and PositionMode
properties and the AlignOffsetSettings
inner tag as configuration options. These three options work together and allow you to position the FloatingActionButton component precisely as per the application requirements.
Test the different positioning options in the Alignment Demo for the RadFloatingActionButton
Align
The Align
property specifies the position of the FloatingActionButton relative to its container. When using this option it is important to ensure that the FloatingActionButton container has a CSS position other than static and allows overflow content. The available alignment options are:
- "TopStart": positions the button at top left corner of the container.
- "TopCenter": positions the button at top center of the container.
- "TopEnd": positions the button at top right corner of the container.
- "MiddleStart": positions the button at middle left of the container.
- "MiddleEnd": positions the button at middle right of the container.
- "BottomStart": positions the button at bottom left corner of the container.
- "BottomCenter": positions the button at top center of the container.
- "BottomEnd": (Default Value) positions the button at bottom right corner of the container.
In Right-To-Left (RTL) mode of Control the the Start positions will be processed as right instead of left, and respectively End positions will align to the left instead of right. E.g Align="TopStart" in RTL mode will result in button aligned to the top right corner.
Align
works in conjunction with PositionMode
and the AlignOffset
.
When using align, make sure the FloatingActionButton container has css position other than "static".
PositionMode
The PositionMode
property specifies the CSS position of the FloatingActionButton in the document. You can position the RadFloatingActionButton relative to the closest ancestor or position it relative to the viewport. The PositionMode
can be set to:
- "Absolute" - positions the button relative to the nearest positioned ancestor.
- "Fixed" - (Default Value) positions the button relative to the viewport.
AlignOffsetSettings
The AlignOffsetSettings
configuration option specifies the horizontal and vertical offset of the RadFloatingActionButton relative to the Align configuration defined.
<telerik:RadFloatingActionButton runat="server" ID="RadFloatingActionButton1" Text="Add to Queue" PositionMode="Absolute" Align="TopStart">
<AlignOffsetSettings X="50" Y="50" />
</telerik:RadFloatingActionButton>