Alignment
The Telerik UI FloatingActionButton for ASP.NET Core exposes the Align, AlignOffset and PositionMode configuration options. These three options work together and allow you to position the FloatingActionButton component precisely as per the application requirements.
Align
The Align configuration option 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.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Align(FloatingActionButtonAlign.TopCenter)
)
<kendo-floatingactionbutton name="fab"
align="FloatingActionButtonAlign.TopCenter">
</kendo-floatingactionbutton>
AlignOffset
The AlignOffset configuration option specifies the horizontal and vertical offset of the FloatingActionButton relative to the Align configuration defined.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Align(FloatingActionButtonAlign.BottomStart)
.AlignOffset(ao=>ao.Horizontal(50).Vertical(50))
)
<kendo-floatingactionbutton name="fab"
align="FloatingActionButtonAlign.BottomStart"
align-offset-horizontal="50"
align-offset-vertical="50">
</kendo-floatingactionbutton>
PositonMode
The PositionMode configuration option specifies the CSS position of the FloatingActionButton in the document. You can position the FloatingActionButton relative to the closest ancestor or position it relative to the viewport.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Align(FloatingActionButtonAlign.BottomStart)
.AlignOffset(ao=>ao.Horizontal(50).Vertical(50))
.PositionMode(FloatingActionButtonPositionMode.Fixed) //positions the button relative to the viewport
)
<kendo-floatingactionbutton name="fab"
align="FloatingActionButtonAlign.BottomStart"
align-offset-horizontal="50"
align-offset-vertical="50"
position-mode="FloatingActionButtonPositionMode.Fixed"> //positions the button relative to the viewport
</kendo-floatingactionbutton>