Cannot resize combo box arrow

[Omar]

Hi,

When I change the font for the combo box the arrow icon size does not change.

How to change the arrow size?

Thanks in advance,

Omar

[Omar]

Anyone can help me, please.

[Valentin Dragnev]

Hello Omar,

 

When using CSS to change the font of the ComboBox you need to write more specific CSS selectors. 

Here is one example that changes the arrow size of the ComboBox. 

ComboBox markup definition (be sure to use RenderMode="Lightweight"): 

<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

Example of a more specific CSS that will override the built-in styles:

<style>
    html body .RadComboBox .p-icon:before {
        font-size: 56px;
    }
</style>

You might have a different structure that will not work with my CSS example therefore, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

• Inspect the Generated HTML of a Control
• See the Applied Styles

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;
• CSS !important: Don’t Use It. Do This Instead

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

• How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
• Get Started With Viewing And Changing CSS
• Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
• Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
• Testing CSS Styles with Chrome Inspector Tool - video

 

I hope this will be helpful. 

 

Regards,
Valentin
Progress Telerik

[Omar]

Works like a charm.

Many thanks Valentin.