Style the items

Thread ID:	Created:	Updated:	Platform:	Replies:
141621	Dec 21,2018 08:11 AM UTC	Dec 21,2018 10:23 AM UTC	jQuery	1

Subscribe to this post

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' }

];

$('.list').ejComboBox({

dataSource: datasource,

fields: { groupBy: 'category', text: 'field', value: 'field' },

placeholder: 'Select a mapping',

width: '350px',

popupHeight: '250px',

popupWidth: '350px'

});

Reply | Reply with quote

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.

<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

Reply | Reply with quote

CONTACT US

Style the items

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US