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

Size In Percent

User Details
Username:
Password:
 

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Notification.SizeInPercent.DefaultVB" %>

<%@ 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>
    <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" ID="RadTextBox1" 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>

Support & Learning Resources

Find Assistance