Notification - Size In Percent

User Details
Username:
Password:
 
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

As of Q3 2011, RadNotification allows the developer to set its size not only in pixels, but also in percent. This percentage is calculated from the browser's viewport.

This demo simulates a login page which welcomes the user and imitates several basic options for site navigation—the welcome bar at the top allows you to check for messages and also open a management panel.

Enter any user name and password and click login to begin.

All three RadNotifications have some dimensions set in percent and will, therefore, resize according to the browser size.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCs.aspx.cs" Inherits="Telerik.Web.Examples.Notification.SizeInPercent.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function closeWelcomeMsg() {
                $find("<%=WelcomeNotification.ClientID %>").hide();
            }

            function checkNewMessages() {
                $find("<%=NewMessagesNotification.ClientID %>").update();
            }

            function showToolsPanel() {
                $find("<%=ToolsNotification.ClientID %>").show();
            }

            function OnClientUpdated(sender, args) {
                sender.show();
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadNotification RenderMode="Lightweight" runat="server" ID="WelcomeNotification" Width="100%" Height="140px"
                             EnableRoundedCorners="true" EnableShadow="true" VisibleTitlebar="false" Position="TopCenter"
                             Animation="Slide" AutoCloseDelay="0" KeepOnMouseOver="false" CssClass="WelcomeNotification">
        <ContentTemplate>
            <div class="wcMain">
                <h4>
                    <asp:Label Style="font-size: 18px;" ID="LabelName" Text="" runat="server"></asp:Label>
                </h4>
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButtonMessages" CssClass="btnMargin" Text="Check for New Messages"
                                   OnClientClicked="checkNewMessages" AutoPostBack="false">
                    <Icon PrimaryIconCssClass="rbRefresh"></Icon>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButtonTools" CssClass="btnMargin" Text="Show Tools Panel"
                                   OnClientClicked="showToolsPanel" AutoPostBack="false">
                    <Icon PrimaryIconCssClass="rbConfig"></Icon>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButtonClose" Text="Close This" OnClientClicked="closeWelcomeMsg"
                                   AutoPostBack="false">
                    <Icon PrimaryIconCssClass="rbCancel"></Icon>
                </telerik:RadButton>
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    <telerik:RadNotification RenderMode="Lightweight" runat="server" ID="NewMessagesNotification" Width="30%"
                             EnableRoundedCorners="true" EnableShadow="true" Position="BottomCenter" Animation="FlyIn"
                             Title="New Messages since last visit" OnCallbackUpdate="NewMessagesNotification_CallbackUpdate"
                             OnClientUpdated="OnClientUpdated" AutoCloseDelay="4000" ContentIcon="Email.png"
                             TitleIcon="Email16.png" CssClass="NewMessagesNotification">
    </telerik:RadNotification>
    <telerik:RadNotification RenderMode="Lightweight" runat="server" ID="ToolsNotification" Position="MiddleRight"
                             EnableRoundedCorners="true" EnableShadow="true" Width="90px" Height="100%" Title="Tools"
                             Animation="Slide" AutoCloseDelay="0" TitleIcon="tools.png" CssClass="ToolsNotification">
        <ContentTemplate>
            <div class="toolBtnWrapCont">
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButtonConfig" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbConfig" PrimaryIconLeft="16" PrimaryIconTop="20">
                    </Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbSearch" PrimaryIconLeft="16" PrimaryIconTop="20">
                    </Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton2" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="16" PrimaryIconTop="20"></Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton3" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbUpload" PrimaryIconLeft="16" PrimaryIconTop="20">
                    </Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton4" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbDownload" PrimaryIconLeft="16" PrimaryIconTop="20">
                    </Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton5" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="16" PrimaryIconTop="20"></Icon>
                </telerik:RadButton>
                <br />
                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton6" AutoPostBack="false" Height="65px"
                                   Width="65px" CssClass="toolBtn">
                    <Icon PrimaryIconCssClass="rbHelp" PrimaryIconLeft="16" PrimaryIconTop="20"></Icon>
                </telerik:RadButton>
            </div>
        </ContentTemplate>
    </telerik:RadNotification>
    <div class="demo-container size-thin">
        <div class="loginDetails">
            <fieldset>
                <legend>User Details</legend>
                <table cellpadding="3" cellspacing="0">
                    <tr>
                        <td class="textTD">
                            Username:
                        </td>
                        <td style="vertical-align: middle;">
                            <telerik:RadTextBox RenderMode="Lightweight" ID="TextboxUser" runat="server" Text="John Smith"></telerik:RadTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="textTD">
                            Password:
                        </td>
                        <td>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" EmptyMessage="Enter any password" />
                        </td>
                    </tr>
                    <tr>
                        <td class="textTD">
                            &nbsp;
                        </td>
                        <td>
                            <telerik:RadButton RenderMode="Lightweight" ID="LoginButton" Text="Login" OnClick="LoginButton_Click" runat="server">
                            </telerik:RadButton>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?