Textbox Width with Labels

[Jon]

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

[Princy]

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.

[Jon]

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

[Milind]

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

[Jon]

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;
    }