RadTextBox with label and input width

[jorge]

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>

[Shinu]

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.

[jorge]

No matter what the width setting is, it still behaves the same.  Are you saying this is a bug?

[-DJ-]

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-

[Dimo]

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.