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

Align

configuration

Specifies position of the FloatingActionButton relative to its container. Valid position options are:

"top start": positions the button at top left corner of the container.
"top center": positions the button at top center of the container.
"top end": positions the button at top right corner of the container.
"middle start": positions the button at middle left of the container.
"middle end": positions the button at middle right of the container.
"bottom start": positions the button at bottom left corner of the container.
"bottom center": positions the button at top center of the container.
"bottom end": positions the button at bottom right corner of the container.

align works in conjunction with positionMode and alignOffset.

**Note: when using align, make sure the FloatingActionButton container has css position other than "static" and allows overflow content.

align

String

Default: "bottom end"

<div class="fab-container" style="position: relative;">
    <button id="fab-top-start">Top Start</button>
    <button id="fab-top-center">Top Center</button>
    <button id="fab-top-end">Top End</button>

    <button id="fab-middle-start">Middle Start</button>
    <button id="fab-middle-end">Middle End</button>

    <button id="fab-bottom-start">Bottom Start</button>
    <button id="fab-bottom-center">Bottom Center</button>
    <button id="fab-bottom-end">Bottom End</button>
</div>

<script>
    $('#fab-top-start').kendoFloatingActionButton({  align: 'top start' });
    $('#fab-top-center').kendoFloatingActionButton({  align: 'top center' });
    $('#fab-top-end').kendoFloatingActionButton({  align: 'top end' });
    $('#fab-middle-start').kendoFloatingActionButton({  align: 'middle start' });
    $('#fab-middle-end').kendoFloatingActionButton({  align: 'middle end' });
    $('#fab-bottom-start').kendoFloatingActionButton({  align: 'bottom start' });
    $('#fab-bottom-center').kendoFloatingActionButton({  align: 'bottom center' });
    $('#fab-bottom-end').kendoFloatingActionButton({  align: 'bottom end' });
</script>