Disable CSS Class Selectors

7 posts, 1 answers
  1. Michael
    Michael avatar
    7 posts
    Member since:
    Aug 2012

    Posted 17 Apr 2012 Link to this post

    i would like the CSS class selectors such as: 
    .RadMenu_iDefault .rmItem a.rmLink {
        padding: 1px 0 1px 12px;
    }
    .RadMenu_iDefault .rmHorizontal .rmItem {
        padding: 2px 0;
    }
    .RadMenu_iDefault_rtl .rmItem a.rmLink {
        padding: 1px 12px 1px 0;
    }
    .RadMenu_iDefault .rmVertical .rmItem a.rmLink {
        padding: 1px 12px;
    }
    div.RadMenu_iDefault_rtl .rmHorizontal .rmText {
        padding: 0 0 1px 12px;
    }
    Not to be rendered with the code at run time, this is because i like using 'DotLess' in my projects and i'm used to the way i style the pages using the elements like:

    [Valid DotLess Syntax]
    .Menu_Head{
        float: right;
        list-style: none;
        #Layouts > .FullAutoWidth;
        --{}
        a {
            color: #ffffff;
            text-decoration: none;
            white-space: nowrap;
            display: block;
            --{}
            &:visited, &:active {
                color:  #ffffff;
                text-decoration: none;
            }}
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            list-style:none outside none;
            --{}
            &:focus, li a:focus {
                outline: none;
                outline-width: 0;
            }}}

    i'm not a big fan of the way the style sheets have been created for the telerik rad controls so the the generated selectors are sort of "in the way". i would like the following HTML:
    <ul class="rmRootGroup rmHorizontal">
    <li class="rmItem rmFirst">

    with the selectors omitted at runtime.
    Basically i don't want the /WebResource.axd or the CSS Selectors generated. i have EnableEmbeddedBaseStylesheet="False" but is there something i can do about the CSS Selectors like ie. EnableCSSClassSelectors="False" or a work around to accomplish such?

    <ul class="">
     <li class="">
  2.
  3. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Apr 2012 Link to this post

    Hi Michael,

    You can use both the EnableEmbeddedBaseStylesheet="false" and the EnableEmbeddedSkins="false" property of the different Rad controls to disable the skins and the basestylesheet that are applied.

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Michael
    Michael avatar
    7 posts
    Member since:
    Aug 2012

    Posted 19 Apr 2012 Link to this post


    Thank you for the help but it still does not remedy the issue.
    i used both the advised and all this did is remove the Base Stylesheet and Skins so it's obvious considering thats what they imply they do.
    EnableEmbeddedBaseStylesheet    ="false" [Used]
    EnableEmbeddedSkins="false" [Used]

    still generates the Css Selectors in final markup...
    Here is an example:

    <a id="Base64Control_RadCheckBox1" class="RadButton RadButton_ rbSkinnedButton" href="javascript:void(0)">
        <span class="rbPrimaryIcon  rbToggleRadio"></span>
        <input class="rbDecorated rbPrimary" type="submit" name="Base64Control$RadCheckBox1_input" id="Base64Control_RadCheckBox1_input" value="DECODE" />
        <input id="Base64Control_RadCheckBox1_ClientState" name="Base64Control_RadCheckBox1_ClientState" type="hidden" /></a>

    i don't want nor need the pre-generated Css Class selectors i.e.
    <a id="Base64Control_RadCheckBox1" class="RadButton RadButton_ rbSkinnedButton" href="javascript:void(0)">

    where RadButton RadButton_ rbSkinnedButton is not needed. i would like to see class="" if possible,

    Thanks in advance :)
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 20 Apr 2012 Link to this post

    Hi, Michael.

    Indeed disabling the base stylesheets and the embed skins will not remove class attributes from the generated HTML. But then again, if you are not using those, it shouldn't be a problem that they exist.

    The reason they exist is that we need them to attach various event handlers and create and populate the proper client side objects, needed for the javascript interactions.

    If you do not need those [the js and interactions], you could create your own custom control that inherits from the menu, per say, but overrides the Render method to strip all class names.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Michael
    Michael avatar
    7 posts
    Member since:
    Aug 2012

    Posted 20 Apr 2012 Link to this post

    Thanks for the help and advice on the issue, is there an example for what you prescribe? i would much appreciate a stepping stone.

    Thanks again!
  11. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 23 Apr 2012 Link to this post

    Hi, Michael.

    Here is an example snippet:

    // using jQuery as $
    $(document).ready(function() {
     
        // insert selecotors you want removed comma separated
        $(".rmRootGroup, .rmHorizontal").each(function() {
            // this will refer to the element
            $(this).removeAttr( "class" )
        });
     
    });

    Of course, be warned that NO javascript will work if you remove ALL Telerik generated class names.

    All the best,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Michael
    Michael avatar
    7 posts
    Member since:
    Aug 2012

    Posted 23 Apr 2012 Link to this post

    Thank you for the help, the support here is second to none :)
  14.
Back to Top