Bootstrap-select: Unable to set iconBase and tickIcon using data attributes

Created on 15 Nov 2017  路  4Comments  路  Source: snapappointments/bootstrap-select

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>

Most helpful comment

You need to use snake case, not camel case. e.g data-icon-base, data-tick-icon.

All 4 comments

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.

Was this page helpful?
0 / 5 - 0 ratings