RadNumericTextBox layout issues after upgrade

1 Answer 7 Views
NumericTextBox
Scott
Top achievements
Rank 1
Scott asked on 27 Jul 2022, 06:44 AM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Rumen
Telerik team
answered on 27 Jul 2022, 07:19 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Scott
Top achievements
Rank 1
commented on 27 Jul 2022, 04:59 PM

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
Telerik team
commented on 28 Jul 2022, 07:03 AM

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.

Tags
NumericTextBox
Asked by
Scott
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or