0

I have a telerik treeview which renders in HTML as ul.

When I try it in my aspx with specific css, it doesn't appear in the correct way because the CSS file has ul and li selectors .

From firebug :

enter image description here enter image description here

Now i want to exclude this control from (#tabContaier ul ,#tabContaier Li)

I want some general solution to this problem especially with the telerik controls.

Edit:

After apply the cascade technique :

<telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" Height="200px"
                                                                TriStateCheckBoxes="true"  CheckChildNodes="true" Skin="rad_rv"  EnableEmbeddedSkins="false" >

enter image description here

Improve this question

1 Answer 1

Reset to default
3

There are several ways to override rules in CSS if you can't change the .css file in which these rules are specified.

  1. Cascade: As the name implies, in CSS rules written later override rules written earlier, whether they are in the same sheet or not.

  2. Specificity: Be more specific than the rule you want to override with your selectors. More about specificity.

  3. Inline styles: Write your styles inside the HTML element using the attribute style. This is strongly not recommended, as you should separate presentation and content (that's the whole point of CSS); however, this is the usual way things are done when you override them in javascript (see below). Inline styles are really just a particular case (the strongest) of specificity; it's like saying: “I mean exactly this element here”.

  4. Use !important after a rule: resort to this as a last means of overriding, as !important overrides anything but user-defined !important marked stylesheets.

Of course, since you tagged your question with jQuery, you could do that with jQuery and javascript in general as well. But I don't see, in this case, why you would want to do that.

Examples

In your case, example of better cascading would be just: define #tabContainer ul after your telerik stylesheet defines them. Simple as that. When do you import that stylesheet? Move it above your own stylesheet and you will be sure everything you will write will override what's written there.

An example of specificity, would be defining something like #container #tabContainer ul. This will override the less specific #tabContainer ul rule.

Inline style would mean that you actually put the styles hard-coded in your element, like so:

<ul class=rtUL rtLines" style="height: 40px;">

Using !important works on single rules you want to brute force in, like so:

#tabContainer ul {
    height: 40px !important;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks alot .. The main problem here is :the telerik controls have a special case , they use skin files so i can't access them ,in addition to that i write the renderining result but the control it self is written in .aspx in a specific way .u can take a look on the link example to get what i mean exactly .
@just_name I am not familiar with telerik, but what I see is this: in the example code there there is a part (inside the <head> tag just below the <title>) in which you would be able to define your styles. On the rendered page example, I see that those styles are rendered before the imported stylesheet. I don't know if this is by design (it would be a bad design) or you could change that. If you could put your own styles after the imported styles, you could then use cascading (option 1). If you can't, no worries, just use specificity (option 2).
let's remark that steps 3 and 4 are generally considered as bad practice, so try sticking to cascading css and increased specificity
@Luca My answer clearly state that point 3 is strongly not recommended and point 4 should be the last option. Bear in mind, though, that there are absolutely legitimate cases in which you would want to use those options; if there wouldn't they wouldn't be in the spec. The problem is abuse. Let's just say that you'd better know what you are doing before using 3 or 4.
The cascading technique works as follow: any rule your write later which has the same specificity overrides any rule written earlier. This means: just write your rules after the telerik styles in the document head: really simple as that.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.