We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Style the items

Thread ID:





141621 Dec 21,2018 08:11 AM UTC Dec 21,2018 10:23 AM UTC jQuery 1
Tags: ejComboBox
Marco Giorgi
Asked On December 21, 2018 08:11 AM UTC

I have a combobox with grouped items.
I want to style, font-size in particular, the item name and the grouping field name in the drop down (with different styles)
Is it possible?

Here is my code:

        var datasource = [
            { field: 'Administrative Level 1', category: 'Geographical Data' }, { field: 'Administrative Level 2', category: 'Geographical Data' },
            { field: 'Market Name', category: 'Geographical Data' },
            { field: 'Commodity Name', category: 'Commodity' }, 
            { field: 'Price Value', category: 'Price' }, { field: 'Price of a specific commodity', category: 'Price' },
            { field: 'Price of a specific commodity with unit of measure', category: 'Price' }, { field: 'Unit Name', category: 'Unit of measure' },
            { field: 'Day', category: 'Date' }, { field: 'Month', category: 'Date' }, { field: 'Year', category: 'Date' },
            { field: 'Full Date (dd/mm/yyyy)', category: 'Date' }, { field: 'Week', category: 'Date' } , { field: 'Weekly Date (ww/yyyy)', category: 'Date' } 
                dataSource: datasource,
                fields: { groupBy: 'category', text: 'field', value: 'field' },
                placeholder: 'Select a mapping',
                width: '350px',
                popupHeight: '250px',
                popupWidth: '350px'

Prince Oliver [Syncfusion]
Replied On December 21, 2018 10:23 AM UTC

Hi Marco, 
Thank you for contacting Syncfusion support. 
We can modify the font-size for item name and the grouping field name by overriding the following classes.  
  /* For Group field name */ 
  .e-dropdownbase .e-fixed-head, .e-dropdownbase .e-list-group-item { 
    font-size: 15px; 
  /* For item name */ 
  .e-dropdownbase .e-list-item { 
    font-size: 10px; 
We have attached a sample for your reference, please find the sample at the following location: https://jsplayground.syncfusion.com/b3fc10bn  
Please let us know if you need any further assistance on this. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon