Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > General Discussions > How to avoid my css affecting radControls

Not answered How to avoid my css affecting radControls

Feed from this thread
  • Clive Hoggar Master avatar

    Posted on Feb 3, 2012 (permalink)

    Hi

    Just setting off on a new website development, and looking for advice on avoiding interfering with RadControls when building my css file.

    In particular I want to set the default style of the bullets in unordered lists, which has cause grief with buttons and menu items in the past.

    What is the best way to approach this to avoid problems with RadControls  styling?

    Advice would be very welcome!

    Thanks

    Clive

    Reply

  • Bozhidar Bozhidar admin's avatar

    Posted on Feb 7, 2012 (permalink)

    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">
    <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:

    <%@ 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">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .myClass 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 class="myClass">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
            <li>List 4</li>
        </ul>
        </form>
    </body>
    </html>

    Specificstyles.gif shows the result in the browser - you have the UL styled and in the same time RadWidnow looks fine.

    Regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > General Discussions > How to avoid my css affecting radControls