TechQA.

remove font-family from telerik radcombobox from jquery

509 views Asked by At

I am creating a web app in c# with js in which I am using telerik component,

the problem is the custom class for my telerik dropdown is

.RadComboBox_Bootstrap {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

now I want to remove this class I did something like the following

$('.RadComboBox_Bootstrap').css({'font-family':''})

And 

$('.RadComboBox_Bootstrap').css({'font-family':'Arial !important'})

but nothing worked for me,

I tried the following

$('.RadComboBox_Bootstrap').eq(13).css({'font-size':'8px'})

and the font-size of radcombobox changed but when I try to change font-family, I am not able to succeed, what may be the issue here?

javascript telerik radcombobox
Original Q&A
2

There are 2 answers

0
Trio On BEST ANSWER

I've got a question: you said you want to remove the class, but then you try to override the css rule...what do you want to archieve?

In case you want to remove the class you should use the removeClass method. See documentation here;

If you want to override the css rule: is it possible your

$('.RadComboBox_Bootstrap').css({'font-family':''})

is executed before the .RadComboBox_Bootstrap element is rendered/elaborated? (is the $('.RadComboBox_Bootstrap').css({'font-family':''}) in document.ready (or $(function(){...}))) function?). If the instruction is executed before the dom is loaded, the jQuery selector finds no elements and do not apply the css rule. In this example the rule will NOT be applied

<html>
    <head>
        <!-- import jquery here -->
        <script>
           $('.RadComboBox_Bootstrap').css({'font-family':''})
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

In this example, it will

<html>
    <head>
        <!-- import jquery here -->
        <script>
            $(function(){
                $('.RadComboBox_Bootstrap').css({'font-family':''});
            });
        </script>
    </head>
    <body>
        <div class="RadComboBox_Bootstrap"></div>
    </body>
</html>

Anyway you can always write your own css rule to override the one you reported:

.my-wrapper .RadComboBox_Bootstrap {
    font-family: Arial,sans-serif;
}

(you have to add my-wrapper class to a parent). This way you custom rule is "more specific" for the dom element and will be applied. See this for specificity details

0
Attila Antal On

If you want to disable the embedded skin, you can set the EnableEmbeddedSkins property to false or if you only want to override several rules, better to create your own class, add it to the ComboBox using the CssClass property. In the CSS file make a strong selector for your class and override the rules. Telerik controls highly rely on their own classes and by removing them may cause unexpected appearance.

<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableEmbeddedSkins="false" CssClass="myClass">
</telerik:RadComboBox>

See Specificity and CSS Specificity: Things You Should Know to get a better understanding on CSS class selectors and how to make them stronger.

Update:

Changing the font can be achieved with pure CSS. All you need to focus on is the CSS specificity mentioned above.

Important to know that Telerik RadComboBox consists of two individual HTML elements. RadComboBox element and RadComboBoxDropDown element. One item, the selected Item belongs to the RadComboBox element while the rest of the items that are shown when the DropDown opens, they belong to the RadComboBoxDropDown element.

Changing the font for the RadComboBox element, will only change for the selected item. Additional style needs to be applied for the items in the RadComboBoxDropDown as well.

Example CSS:

html body .RadComboBox_Bootstrap, /** font for RadComboBox */
html body .RadComboBoxDropDown_Bootstrap { /** font for RadComboBoxDropDown */
    font-family: cursive;
}

enter image description here

Related Questions in JAVASCRIPT

Related Questions in TELERIK

Related Questions in RADCOMBOBOX

Popular Questions

Trending Questions