alignString(default: "bottom end")
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.
Example
<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>In this article