RadTextBox bigger font size weirdness in IE

[chris_cf]

I've got a RadTextBox which I set the font-size to "XX-Large". In IE, when the page loads, the control looks like this:

When I focus and backspace on it, it looks like this:


Only when it then loses focus, it is aligned correctly:


Using 2012 Q2. Only tested in IE 9 and 10.

[chris_cf]

Additionally, in IE10, the text is cut off at the top and right side until it is edited.

[Tim Barton]

I am glad I am not the only one who sees this.  I opened a ticket last week and I haven't seen it put in the issue tracker and they said they don't know when it will be fixed.   This is a show stopper for us as it looks very unprofessional. It also happens when you use the Empty Message property.

It seems if you change the font size for this control, it starts acting this way. If I leave the font size alone, it works as expected. 
Also, if you enable the ShowSpinButtons, the control does not adhere to the width property nor font-size when navigating to http://computername instead of http://localhost.  See  attached picture.  

I am using a certain font size for my project and want to keep the size consistent.

My Environment is as follows:
Windows 8 Final
IE 10 (happens on IE 9 when pages served by IIS 8)
IIS 8

This only happens in IE and not Firefox, Safari, or Chrome

[Vasil]

Hi,

The RadInput serialize styles like font-size, width, heigth, color etc. to be able to change them dynamically on focus/blur/hover/enabled/disabled. Then the client side object applies this styles to the visible input element on the page. And the problem with IE is that it does not visualize it properly when font size is dinamically set using JavaScript.

The issue can be avoided by using CSS for setting the font size, instead of the inline setting.

Kind regards,
Vasil
the Telerik team

[chris_cf]

That works Vasil. Thank you very much!

[Gaurab]

Thanks, it worked for me too.  It's great to have a good support community!

To be clear, I had:

<telerik:RadTextBox ID="RadTextBox1" runat="server"
        Width="250"
        Font-Size="16px"
        Height="32px"/>

 

This text was sometimes cut off like others showed.  I changed it as follows.  I added a css class called largeFont.

.largeFont
{
    font-size:16px !important;
}

 

Then changed my markup to this:

<telerik:RadTextBox ID="RadTextBox1" runat="server"
        Width="250"
        CssClass="largeFont"
        Height="32px"/>