RadNumericTextBox layout issues after upgrade

[Scott]

I'm upgrading Telerik UI for ASP.NET AJAX from a very old version, from 2013, to the latest. For the most part it has been plug & play except for RadNumericTextBox, which doesn't display the spin buttons correctly and doesn't show the validation icon correctly.

Here is a screenshot of old vs new:

This is the markup:

<table>
	<tr id="trPassExp" runat="server" class="lhqDetailLabel">
		<td colspan="2" align="right">Password expires every&nbsp;</td>
		<td colspan="2" style="text-align: left;">
			<telerik:RadNumericTextBox runat="server" 
				RenderMode="Lightweight"
				ShowSpinButtons="true" 
				NumberFormat-DecimalDigits="0" 
				Width="60px"
				EnableEmbeddedSkins="True" 
				Skin="Sunset" 
				MinValue="7" 
				MaxValue="90" id="txtPassExpires"></telerik:RadNumericTextBox>&nbsp;days&nbsp;&nbsp;
		</td>
	</tr>
	<tr id="trPassLen" runat="server" class="lhqDetailLabel">
		<td colspan="2" align="right">Password must be at least&nbsp;</td>
		<td colspan="2" style="text-align: left;">
			<telerik:RadNumericTextBox runat="server" 
			   RenderMode="Lightweight" 
			   ShowSpinButtons="true" 
			   NumberFormat-DecimalDigits="0" 
			   Width="60px" 
			   EnableEmbeddedSkins="True" 
			   Skin="Sunset" 
			   MinValue="8" 
			   MaxValue="35" id="txtPassMin"></telerik:RadNumericTextBox>&nbsp;characters&nbsp;&nbsp;
		</td>
	</tr>
	 <tr id="trPassNumeric" runat="server" class="lhqDetailLabel">
		<td colspan="2" align="right">Password must contain at least&nbsp;</td>
		<td colspan="2" style="text-align: left;">
			<telerik:RadNumericTextBox runat="server" 
			   RenderMode="Lightweight" 
			   ShowSpinButtons="true" 
			   NumberFormat-DecimalDigits="0" 
			   Width="60px" 
			   EnableEmbeddedSkins="True" 
			   Skin="Sunset" 
			   MinValue="1" 
			   MaxValue="8" id="txtNumeric"></telerik:RadNumericTextBox>&nbsp;numbers&nbsp;&nbsp;
		</td>
	</tr>
	<tr id="trShutDown" runat="server" class="lhqDetailLabel">
		<td colspan="2" align="right">Disable user account after&nbsp;</td>
		<td colspan="2" style="text-align: left;">
			<telerik:RadNumericTextBox runat="server" 
			   RenderMode="Lightweight" 
			   ShowSpinButtons="true" 
			   NumberFormat-DecimalDigits="0" 
			   Width="60px" 
			   EnableEmbeddedSkins="True" 
			   Skin="Sunset" 
			   MinValue="3" 
			   MaxValue="6" id="txtLoginTrys"></telerik:RadNumericTextBox>&nbsp;unsuccessful login attempts&nbsp;&nbsp;
		</td>
	</tr>
</table>

Any ideas?

[Rumen]

Hi Scott,

I hope you are doing good!

The appearance problem can happen if there are a mixture of classic and lightweight render modes on the same page. Please make sure to apply  RenderMode="Lightweight" to all Telerik components of the page as well as in the web.config file: 

<appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
</appSettings>

You can also examine the rendering of the control using the solution provided in the following KB article: 

Determine the render mode of all Telerik controls and catch mixed render mode issues

In short, open the Browser's DevTools(F12) and in the Console tab to execute the following script to see which components are rendered in Classic render mode:

$telerik.$(document.body).append('<script src="https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/files/render-mode-script.js"></script>');

 

Regards,
Rumen
Progress Telerik

[Scott]

Thank you! Only the RadNumericTextBoxes were set to Lightweight render mode, so changing them all to Classic fixed the issue. I had previously tried to change only one of the text boxes to classic and it didn't fix the issue, but changing all of them did.

[Rumen]

Perfect, I am glad that the problem is resolved!

It is worth it to add that some of the Telerik AJAX components like the RadCheckBox do not offer Classic rendering so if you use them in the future, make sure that all the controls are configured to use Lightweight rendering, instead of Classic.

From the docs:

RadButton, RadCheckBox, RadImageButton, RadLinkButton, RadPushButton and RadToggleButton share the same rendering and stylesheets, so all their instances on the same page must have RenderMode=Lightweight because this is the only mode supported by all of these controls. If you experience problems with distorted appearance see the Distorted Appearance article.