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 675 Views
Input
This is a migrated thread and some comments may be shown as answers.
bemara57
Top achievements
Rank 1
bemara57 asked on 21 May 2008, 04:17 PM
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?

4 Answers, 1 is accepted

Sort by
0
Konstantin Petkov
Telerik team
answered on 22 May 2008, 05:53 AM
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
0
Steve
Top achievements
Rank 2
answered on 16 Dec 2008, 05:59 PM
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,
0
Dimo
Telerik team
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.
0
Ashley
Top achievements
Rank 1
answered on 29 Jan 2015, 12:21 AM
According to TripXpert this is able to be done...

Tags
Input
Asked by
bemara57
Top achievements
Rank 1
Answers by
Konstantin Petkov
Telerik team
Steve
Top achievements
Rank 2
Dimo
Telerik team
Ashley
Top achievements
Rank 1
Share this question
or