This is a migrated thread and some comments may be shown as answers.

How to avoid my css affecting radControls

1 Answer 101 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

1 Answer, 1 is accepted

answered on 07 Feb 2012, 09:13 AM

specificstyles.gif

globalstyles.gif

Hello,

To avoid problems with general application CSS styles and Telerik Controls you should use CSS classes and not global styles. In the case of having specific styles for unordered lists, I will suggest to use something like <ul class="myClass"> and to cascade through that class.

Look at the following example, where global styles for unordered list are applied and that breaks the RadWindow layout, which buttons are made with an unordered list also:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

ul li

{

border: 3px solid red;

list-style: circle;

font-size: 20px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadWindow ID="rw1" runat="server" Width="400" Height="400" VisibleOnPageLoad="true">

</telerik:RadWindow>

<ul>

<li>List 1</li>

<li>List 2</li>

<li>List 3</li>

<li>List 4</li>

</ul>

</form>

</body>

</html>

Attached is globalstyles.gif shwoing the result in the browser. The desited styles for unoredered list were applied to the UL element, but they were applied also to the RadWindow, which we do not want.

The following examples shows the same code with a CSS class applied to the UL element that we want to style. The CSS cascade is done through that class and that way we do not break RadWidnow layout: