Textbox Width with Labels

5 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 13 Aug 2014 Link to this post

    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

  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2014 in reply to Jon Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 18 Aug 2014 in reply to Princy Link to this post

    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
  5. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 20 Aug 2014 in reply to Princy Link to this post

    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
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Aug 2014 in reply to Milind Link to this post

    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;
        }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017