New to Kendo UI for jQuery? Download free 30-day trial

Alignment

The Kendo UI FloatingActionButton 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 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. For available positions refer to the FloatingActionButton align API section

    <div id="fab"></div>

    <script>
        $(document).ready(function () {
            $("#fab").kendoFloatingActionButton({
                align: "top center"
            });
        });
    </script>

AlignOffset

The alignOffset configuration option specifies the horizontal and vertical offset of the FloatingActionButton relative to the align configuration defined.

    <div id="fab"></div>

    <script>
        $(document).ready(function () {
            $("#fab").kendoFloatingActionButton({
                align: "bottom start",
                alignOffset: { 
                    x: 50, 
                    y: 50 
                }
            });
        });
    </script>

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.

    <div id="fab"></div>

    <script>
        $(document).ready(function () {
            $("#fab").kendoFloatingActionButton({
                align: "bottom start",
                alignOffset: { 
                    x: 50, 
                    y: 50 
                },
                positionMode:"fixed" //positions the button relative to the viewport
            });
        });
    </script>

See Also

In this article
Not finding the help you need? Improve this article