Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to set iconBase and tickIcon using data attributes #1860

Closed
bartclaeys opened this issue Nov 15, 2017 · 4 comments
Closed

Unable to set iconBase and tickIcon using data attributes #1860

bartclaeys opened this issue Nov 15, 2017 · 4 comments

Comments

@bartclaeys
Copy link

bartclaeys commented Nov 15, 2017

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>

@GreggOrdHume
Copy link

GreggOrdHume commented Nov 22, 2017

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

@GreggOrdHume
Copy link

GreggOrdHume commented Nov 22, 2017

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

@caseyjhol
Copy link
Member

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

@TerrySInterject
Copy link

Thanks caseyjhol, that is not clear at all from the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants