RadTextBox EmptyMessage/Text flickering Issue

[Ashish]

Hello Telerik Team.

I have used “RadTextBox” in my Web Page and i have set the “EmptyMessage” of “RadTextBox”. Besides that i have also applied the width, height, padding and Font-Size to the “RadTextBox”. See the markup of RadTextBox which I have used in Web Page.

<div>

   <telerik:RadTextBox ID="textbox1" runat="server" EmptyMessage="Type Search Text Here"

      Width="610px" SelectionOnFocus="SelectAll" autocomplete="off"

      style="padding: 3px 10px 12px 10px;#padding: 14px 10px 12px 10px;"

      EnableSingleInputRendering = "false" Height="18px" Font-Size="1.3em">

      <EmptyMessageStyle Font-Italic="true" />

   </telerik:RadTextBox>

</div>

Now the problem is when the page gets loaded in the browser, initially for the fraction of second the “EmptyMessage” is displayed in the small font-size and then it come back to the original font size. In other words we can say, when the page gets loaded in the browser, the style specified to “RadTextBox” is not gets applied which cause the noticeable flicker in text or we can say the text appears at wrong place and then it moves to the correct place.

As shown in following screenshot the “EmptyMessage” shown in small font size also it is not in italic style and appears at wrong place.

After fraction of second all the specified style will get applied to “RadTextBox”. Please refer following screenshot.

The same thing is happened when “RadTextBox” having some text instead of “EmptyMessage”. Here also when page gets loaded the user input text will first appears at wrong place and then come back to original position.

The Telerik Version we are using: 2012.2.912.35

(Note: We have used the CSS to set style of controls which are used in our application but we haven’t declare any CSSCLASS inside CSS file for “RadTextBox”)

Please suggest any workaround to get rid from the above mentioned issue.  

 

Thanks,

Ashish

[Eyup]

Hello Ashish,

The style settings defined in the mark-up tag of RadTextBox are serialized in the server and applied on the client. Apparently, the .NET framework is relatively slower and causes this flickering to appear.

Please use a newer version of the framework, for example 4.5, and the issue will be resolved. Alternatively, you can replace the style definitions using CSS.

I hope this helps.

All the best,
Eyup
the Telerik team