Style the items

[Marco Giorgi]

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'

            });

[Prince Oliver]

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