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

Textbox Width with Labels

4 Answers 47 Views
Input
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 13 Aug 2014, 02:40 PM
Hi All,

I'm embarking on a revamp of my application and rather than having label and radtextbox pairs would like to use the built in labels of the radtextbox (and other controls). 

In the sample below I would like to control the width (282px) in the CSS.  However if I do that then the label width is ignored.  The only way to get a fixed with label and textbox seems to be to declare the label with in the CSS and the overall textbox width as below - then in this case if the label is 100px wide the textbox itself would be 282px-100px = 182px.

<telerik:RadTextBox ID="uxUsername" Runat="server" Width="282px" Label="Username:" CssClass="RadTextBoxHalf" LabelCssClass="RadTextBoxLabel"></telerik:RadTextBox>

Having to use the textbox for the width seems to be against the principle of CSS.  Any suggestions?

Regards

Jon

4 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 14 Aug 2014, 08:16 AM
Hi Jon,

In your code you have set the Width property of RadTextBox to 282px, this will be the width for the entire control. In order to give the width to the TextBox please try the below CSS.

CSS:
.riSingle .riTextBox
{
    width: 282px !important;
}

Thanks,
Princy.
0
Jon
Top achievements
Rank 1
answered on 18 Aug 2014, 07:46 AM
Hi Princy,

Many thanks - that really helped - in the end I realised that I'd relied on the css working without ! important.  

It should really make a difference integrating the label with the control.

Regards

Jon
0
Milind
Top achievements
Rank 1
answered on 20 Aug 2014, 05:50 AM
Hi Princy,

I want to apply this only to 2 textboxes out of 35 textboxes on my form. the solution given is applied to all textboxes on the form. Also is there a way by which i can incude it in css rather than aspx

Thanks,

Milind
0
Jon
Top achievements
Rank 1
answered on 20 Aug 2014, 06:39 AM
I'd done this already and missed off ! important.  See example below with CSS and textbox tags.  I use a variety to build a 2 column form.

Hope that helps

<telerik:RadTextBox ID="uxUsername" Runat="server" Label="Username:" CssClass="RadTextBoxShort" LabelCssClass="RadTextBoxLabelShort"></telerik:RadTextBox>
 
CSS:
 
   .RadTextBoxLabelShort
    {
        width:80px ! important;
    }
 
    .RadTextBoxShort
    {
        width:170px ! important;
    }
Tags
Input
Asked by
Jon
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Milind
Top achievements
Rank 1
Share this question
or