Telerik Controls Appearance Is Incorrect or Distorted
|Product||Progress® Telerik® UI for ASP.NET AJAX|
The appearance of the Telerik UI for ASP.NET AJAX controls is incorrect and includes the following issues:
Bad element alignment.
Missing borders, shadows, or gradients.
Unexpected design change between dev and production environments.
The issue may be caused by a number of reasons:
Global CSS rules affect HTML elements.
Your Internet Explorer browser is entering Compatibility Mode, which is not supported.
The network requests used to fetch the control skins or scripts do not return successfully.
If you are using some form of authentication mechanism in your site, the HTTP handlers which the Telerik controls use to fetch the needed resources, may get blocked.
The page contains controls of mixed render modes. For example, a Button on the master page has
RenderMode="Classic"and a Button on a user control has
RenderMode="Lightweight". All controls of the same type and their child controls must have the same render mode.
The wrapping element of the control has
The browser zoom is different from 100%. In such cases, the zoom not only increases the font size, but also zooms the entire page which may produce visual glitches when the layout is based on background images or sprites.
Depending on the use case, apply the respective approach:
(Global CSS rules) To solve the issue, refer to the article on distorted appearance. The provided example uses the Window but the approach applies to all controls in the suite.
(IE Compatibility mode) Run your IE browser in Standard mode by following any of the approaches:
Go to Compatibility View Settings menu and Unselect the "Display intranet sites in Compatibility Mode" checkbox.
Speak with your local administrators so they enforce this checkbox rule as a group policy.
X-UA Compatiblemeta tag to your page similar to the following (HTML):
<head id="Head1" runat="server"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
Alternatively, set it as an HTTP header through your
<system.webServer> <httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="IE=edge" /> </customHeaders> </httpProtocol> </system.webServer>
(Network requests) If you are using the scripts CDN or the skins CDN, ensure the cloud can be accessed from the user network. Otherwise, disable the CDN and fall back to the default mode of using WebResource requests.
(Blocked HTTP handlers) Ensure all requests return successfully by, for example, adding a
<location>element for the Telerik handlers that will allow anonymous access (
<configuration> ... <location path="Telerik.Web.UI.WebResource.axd"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location> ... </configuration>
(Mixed render modes) To identify and debug the mixed render mode issue, refer to the article on determining the render mode of all Telerik controls and catching mixed render mode issues.
(Hidden wrapping element) If having appearance or alignment issues when showing controls in such cases, call the
repaint()method each Telerik UI for ASP.NET AJAX control exposes. For controls that wrap Kendo UI widgets, get a reference to the widget and call its
(Browser zoom not 100%) For more information on solving this issue, refer to the Browser Zoom - Why Does It Break Your Page And How To Avoid It blog post.
Alternatively, to avoid the visual glitches caused by the background images and sprites, use the
RenderModeof the controls. It is based on HTML5 and CSS3 and uses font icons instead of images.