Skip to content

Latest commit

 

History

History
76 lines (58 loc) · 3.14 KB

alignment.md

File metadata and controls

76 lines (58 loc) · 3.14 KB
title page_title description slug position
Alignment
jQuery FloatingActionButton Documentation
Learn about the alignment options of the jQuery FloatingActionButton by Kendo UI and learn how to configure the positioning of the widget.
alignment_floatingactionbutton_widget
3

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