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

5 posts, 0 answers
  1. bemara57
    bemara57 avatar
    57 posts
    Member since:
    Mar 2008

    Posted 21 May 2008 Link to this post

    I'm trying to make my RadTextBox labels appear over the input box instead of to the left. Is there any native way to do this? I tried giving the CSS label a display:block, but this didn't work. After looking at the code, I see the label is put in a table cell next to the input box. Is there any property I'm missing that handles this, or is the only way is not to use a label and put them in a table row manually?
  2. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 22 May 2008 Link to this post

    Hi bemara57,

    The RadTextBox's label position cannot be changed. Please, use an ASP:Label instead.

    Let us know if additional questions arise.

    Kind regards,
    Konstantin Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    15 posts
    Member since:
    Dec 2006

    Posted 16 Dec 2008 Link to this post

    I was wondering if anything has changed in regards to label position in the more current release?  The label seems to be very limited if it cannot be put above the textbox (breaks more complicated forms, looks like crap quite frankly since nothing aligns).

    Thanks,
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Dec 2008 Link to this post

    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.
  6. Ashley
    Ashley avatar
    5 posts
    Member since:
    Nov 2014

    Posted 28 Jan 2015 in reply to Konstantin Petkov Link to this post

    According to TripXpert this is able to be done...

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017