New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Positions

The RadFloatingActionButton exposes the Align and PositionMode properties and the AlignOffsetSettings inner tag as configuration options. These three options work together and allow you to position the FloatingActionButton component precisely as per the application requirements.

  • Align—Specifies the 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.
  • PositionMode—Specifies the CSS position of the FloatingActionButton in the document. You can position the RadFloatingActionButton relative to the closest ancestor or position it relative to the viewport. The PositionMode can be set to "Absolute" or "Fixed".
  • AlignOffsetSettings—Specifies the horizontal and vertical offset of the RadFloatingActionButton relative to the Align configuration defined
  • DefaultCS.aspx
    • DefaultCS.aspx
    • PositionsIframe.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • PositionsIframe.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.Overview.DefaultCS" CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style>
        .demo-container label {
            display: block;
            margin: 15px 0 5px 0;
        }

        .btn-send-invite {
            float: right;
            margin: 25px auto 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" runat="server">
       <telerik:RadWindow runat="server" ID="RadWindow1" Width="1000" Height="600" VisibleOnPageLoad="true"
            NavigateUrl="PositionsIframe.aspx">
        </telerik:RadWindow>
        <telerik:RadButton runat="server" OnClientClicked="OnClientClicked" ID="RadButton1" Text="Show Window" AutoPostBack="false" />
        <script>
            function OnClientClicked(sender, args) {
                var wnd = $find("<%= RadWindow1.ClientID %>");
                wnd.show();
            }
        </script>

    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance