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

Disable CSS Class Selectors

6 Answers 301 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 17 Apr 2012, 04:32 PM
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="">

6 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 18 Apr 2012, 04:02 PM
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.
0
Michael
Top achievements
Rank 1
answered on 19 Apr 2012, 04:53 PM

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 :)
0
Ivan Zhekov
Telerik team
answered on 20 Apr 2012, 09:06 AM
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.
0
Michael
Top achievements
Rank 1
answered on 20 Apr 2012, 05:56 PM
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!
0
Accepted
Ivan Zhekov
Telerik team
answered on 23 Apr 2012, 09:40 AM
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.
0
Michael
Top achievements
Rank 1
answered on 23 Apr 2012, 09:43 AM
Thank you for the help, the support here is second to none :)
Tags
Menu
Asked by
Michael
Top achievements
Rank 1
Answers by
Kate
Telerik team
Michael
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or