Style the items

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' } 
        ];
            $('.list').ejComboBox({
                dataSource: datasource,
                fields: { groupBy: 'category', text: 'field', value: 'field' },
                placeholder: 'Select a mapping',
                width: '350px',
                popupHeight: '250px',
                popupWidth: '350px'
            });

1 Reply

PO Prince Oliver Syncfusion Team 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.  
 
<style> 
  /* 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; 
  } 
</style> 
 
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. 
 
Regards, 
Prince 


Loader.
Up arrow icon