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
    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. DevCraft R3 2016 release webinar banner
  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).

  5. Dimo
    Dimo avatar
    8318 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)); 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    <html xmlns=""
    <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 label 
        font:12px arial,sans-serif; 
        /*display:none is not used for accessibility reasons*/ 
        position:absolute !important; 
        top:-2222px !important; 
        left:-2222px !important; 
    <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 = ""
    <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" /> 
    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 

    Best wishes,
    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
DevCraft R3 2016 release webinar banner