This is a migrated thread and some comments may be shown as answers.

How can I make the label appear over the input box instead of next to it?

4 Answers 847 Views

Input

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 17 Dec 2008, 07:23 AM

Hi Marek,

Here are two alternative techniques showing how to achieve a flexible label positioning:

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    Label1.Attributes.Add("for", String.Format("{0}_text", RadTextBox1.ClientID)); 
        
                    Label2.Attributes.Add("for", String.Format("{0}_text", RadTextBox2.ClientID)); 
        
                } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            .MyTextBoxContainer 
        
            { 
        
                position:relative; 
        
            } 
        
            .MyTextBoxContainer label 
        
            { 
        
                position:absolute; 
        
                top:5px; 
        
                left:6px; 
        
                font:12px arial,sans-serif; 
        
                color:#999; 
        
            } 
        
            .noDisplay 
        
            { 
        
                /*display:none is not used for accessibility reasons*/ 
        
                position:absolute !important; 
        
                top:-2222px !important; 
        
                left:-2222px !important; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <script type="text/javascript"> 
        
                function hideLabel(sender, args) 
        
                { 
        
                    $get("<%= Label1.ClientID %>").className = "noDisplay"; 
        
                } 
        
                function showLabel(sender, args) 
        
                { 
        
                    if (sender.isEmpty() && sender.get_emptyMessage() == "") 
        
                    { 
        
                        $get("<%= Label1.ClientID %>").className = ""; 
        
                    } 
        
                } 
        
            </script> 
        
            <p>The following RadTextBox uses a separate label, which is hidden and shown when needed:</p> 
        
            text text text 
        
            <span class="MyTextBoxContainer"> 
        
            <label id="Label1" runat="server">My Label 1</label> 
        
            <telerik:RadTextBox ID="RadTextBox1" runat="server" ClientEvents-OnFocus="hideLabel" ClientEvents-OnBlur="showLabel" /> 
        
            </span> 
        
            text text text 
        
            <p>The following RadTextBox uses a separate label, which is always hidden, but the control's empty message mimics the label's behavior from the first example:</p> 
        
            text text text 
        
            <label id="Label2" runat="server" class="noDisplay">My Label 2</label> 
        
            <telerik:RadTextBox ID="RadTextBox2" runat="server" EmptyMessage="My Label 2" /> 
        
            text text text 
        
            </form> 
        
            </body> 
        
            </html>

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.