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>