RadTextBox with label and input width

5 posts, 0 answers
  1. jorge
    jorge avatar
    23 posts
    Member since:
    Apr 2007

    Posted 18 Sep 2008 Link to this post

    How can I keep the text box of a RadTextBox from shrinking when it receives focus?

    With this deifnition, the textbox size goes down to a few pixels when it receives focus.  Have tried setting the FocusedStyle-Width property to no avail

            <telerik:RadTextBox ID="gteCustom_SalePriceFM"   
                                runat="server"   
                                Label="Imp Sales Price&nbsp;" 
                                EmptyMessage="greater than" 
                                Width="75px">  
            </telerik:RadTextBox> 
     
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Sep 2008 Link to this post

    Hi jorge,

    This is happening since you have set the Label property for the RadTextBox. One suggestion will be to increase the Width of the RadTextBox. Try the width setting as shown below and see whether the TextBox is shrinking.

    ASPX:
    <telerik:radtextbox id="RadTextBox1"  Width="150px" EmptyMessage="greater than" Label="Imp Sales Price&nbsp;"    runat="server"></telerik:radtextbox> 
         


    Thanks
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jorge
    jorge avatar
    23 posts
    Member since:
    Apr 2007

    Posted 19 Sep 2008 Link to this post

    No matter what the width setting is, it still behaves the same.  Are you saying this is a bug?
  5. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 20 Sep 2008 Link to this post

    Hi guys,

    It sure looks like a bug to me...
    However Shinu is (almost) right. If you set the width high enough it doesn't shrink, in this case 150 just isnt enough. However 200 is.

    I also found a weird css bug while testing this.

    This works perfectly:

     <telerik:RadTextBox   
        ID="gteCustom_SalePriceFM" 
        runat="server"      
        Label="Imp Sales Price&nbsp;"    
        EmptyMessage="greater than" 
        style="width: 200px" />    

    While this actually results in an aspx error!

     <telerik:RadTextBox   
        ID="gteCustom_SalePriceFM" 
        runat="server"      
        Label="Imp Sales Price&nbsp;"    
        EmptyMessage="greater than" 
        style="width: 200px !Important" />    

    Specified argument was out of the range of valid values.
    Parameter name: value


    So, the !Important actually produces this error, what do you think about that...

    Regards,
    -DJ-

  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Sep 2008 Link to this post

    Hi all,

    When using RadInput textboxes with label, it is recommended that the specified width is large enough, so that both the label and the textbox can fit. In addition, the textbox should be wide enough to fit the entered content, otherwise it will expand on blur in IE - this is a bug which we are aware of. This expanding does not occur if the control's native Label is not used.

    Two possible workarounds for cases when both Label and Width are used are:


    1) Enable Label text wrapping with the following CSS rule:

    label.radLabelCss_Skin

    { white-space:normal; }


    2)
    Enforce textbox width and prevent the textbox from expanding in IE when long values are entered:

    <telerik:RadTextBox  
        ID="RadTextBox1" 
        runat="server" 
        Label="some label here" 
        EmptyMessage="some empty message" 
        CssClass="MyCssClass" /> 


    .MyCssClass

    { width:50px !important; }


    You can use (1) and (2) simultaneously.


    DJ,  indeed, a server error occurs if you add !important to the width style in the control's server tag. If you look at the stack trace, you will see why this happens - the width style is passed for parsing as a System.Web.WebControls.Unit type. We will fix this by stripping the !important clause, as it will not do anything in this case anyway.


    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017