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

Alignment

  • Demo Configurator
Position
Offset

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.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="true"  Inherits="Telerik.Web.Examples.FloatingActionButton.BasicUsage.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>
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadFloatingActionButton1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
    <div class="demo-container" style="height: 300px; position: relative;">
        <telerik:RadWindowManager runat="server"></telerik:RadWindowManager>
        <telerik:RadFloatingActionButton runat="server" Size="Medium" ID="RadFloatingActionButton1" Icon="share" Text="Add to Queue" PositionMode="Absolute" Align="TopStart">
            <AlignOffsetSettings X="50" Y="50" />
            <Items>
                <telerik:FloatingActionButtonItem Icon="download" Label="Download" OnClientClicked="downloadClicked"></telerik:FloatingActionButtonItem>
                <telerik:FloatingActionButtonItem Icon="print" Label="Print" OnClientClicked="printClicked"></telerik:FloatingActionButtonItem>
                <telerik:FloatingActionButtonItem Icon="email" Label="Email" OnClientClicked="emailClicked"></telerik:FloatingActionButtonItem>
            </Items>
        </telerik:RadFloatingActionButton>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Position" Size="Medium">

                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="AlignmentOptions" runat="server" AutoPostBack="true" Size="Auto" Label="Alignment Settings Relative to the Container" OnSelectedIndexChanged="AlignmentOptions_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Top Left" Value="TopStart" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Top Center" Value="TopCenter" />
                                    <telerik:RadComboBoxItem Text="Top Right" Value="TopEnd" />
                                    <telerik:RadComboBoxItem Text="Middle Left" Value="MiddleStart" />
                                    <telerik:RadComboBoxItem Text="Middle Right" Value="MiddleEnd" />
                                    <telerik:RadComboBoxItem Text="Bottom Left" Value="BottomStart" />
                                    <telerik:RadComboBoxItem Text="Bottom Center" Value="BottomCenter" />
                                    <telerik:RadComboBoxItem Text="Bottom Right" Value="BottomEnd" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox ID="PositionModeOptions" runat="server" AutoPostBack="true" Size="Auto" Label="Position Mode Settings" OnSelectedIndexChanged="PositionModeOptions_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Absolute" Value="0" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Fixed" Value="1" />
                                </Items>
                            </qsf:ComboBox>
                        </li>

                    </ul>

                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Offset" Size="Medium">
                    <div class="col col-medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:NumericTextBox ID="OffsetX" OnTextChanged="OffsetX_TextChanged" AutoPostBack="true" runat="server" Value="50" Size="Auto" Label="Offset X">
                                </qsf:NumericTextBox>
                            </li>
                            <li>
                                <qsf:NumericTextBox ID="OffsetY" OnTextChanged="OffsetY_TextChanged" AutoPostBack="true" runat="server" Value="50" Size="Auto" Label="Offset Y">
                                </qsf:NumericTextBox>
                            </li>

                        </ul>
                    </div>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance