Different Rendering in Design Time and in Browser

Environment

Product

Progress® Telerik® UI for ASP.NET AJAX

Description

When working with Telerik UI for ASP.NET AJAX, I get a different rendering of controls between the design-time and the browser.

Cause

The design-mode surface of Visual Studio is in a way similar to IE 5.5 and its rendering can be considered illustrative. It may not match the exact rendering of the page in a supported browser.

The way the Telerik UI for ASP.NET AJAX controls actually render in a real browser depends on the following factors:

• The selected RenderMode of the control.
• If the mode is Lightweight, the rendering depends on the font used on the page.
• The skin of the control.

Newly created Telerik-enabled projects default to the Lightweight rendering mode. In this case, due to the elastic design capabilities of the controls, symptoms of the difference are likely to include larger dimensions than in design-time and a font like 16px Times New Roman, which is the common default among browsers.

Solution

To make the rendering in the browser as similar as the one during the design-time, consider using the Classic rendering mode.