I'm trying to set iconBase and tickIcon using data attributes, but it doesn't work. What am I doing wrong?
<select class="selectpicker show-tick" data-iconBase="fa" data-tickIcon="fa-check" title="choose" multiple></select>
This will work friend:
Use this code when initialising your select pickers. Remember pretty much any option you set on the <select> itself you can set inside an object in the selectPicker init like below:
$('.selectpicker').selectpicker({iconBase: 'fa', tickIcon: 'fa-check'});
Here are all the default options so you can see what else you can set :)
Selectpicker.DEFAULTS = {
noneSelectedText: 'Nothing selected',
noneResultsText: 'No results matched {0}',
countSelectedText: function (numSelected, numTotal) {
return (numSelected == 1) ? "{0} item selected" : "{0} items selected";
},
maxOptionsText: function (numAll, numGroup) {
return [
(numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)',
(numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)'
];
},
selectAllText: 'Select All',
deselectAllText: 'Deselect All',
doneButton: false,
doneButtonText: 'Close',
multipleSeparator: ', ',
styleBase: 'btn--transparent',
style: 'btn--dropdown',
size: 'auto',
title: null,
selectedTextFormat: 'values',
width: false,
container: false,
hideDisabled: false,
showSubtext: false,
showIcon: true,
showContent: true,
dropupAuto: true,
header: false,
liveSearch: false,
liveSearchPlaceholder: null,
liveSearchNormalize: false,
liveSearchStyle: 'contains',
actionsBox: false,
iconBase: '',
tickIcon: 'fa-check',
showTick: false,
template: {
caret: ''
},
maxOptions: false,
mobile: false,
selectOnTab: false,
dropdownAlignRight: false,
windowPadding: 0
};
You need to use snake case, not camel case. e.g data-icon-base, data-tick-icon.
Thanks caseyjhol, that is not clear at all from the documentation.
Most helpful comment
You need to use snake case, not camel case. e.g data-icon-base, data-tick-icon.