New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Alignment

The Telerik UI FloatingActionButton for ASP.NET MVC 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)
    )   

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))
    )

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
    )

See Also

In this article