twitter-bootstrapfuelux

FuelUX Pillbox - change default class for added pill


I'm using Pillbox from FuelUX for tagging records. Every pill desribed as li entity in such way:

<li class="btn btn-default pill" data-value="two-value">
  <span>Item 2</span>
  <span class="glyphicon glyphicon-close">
  <span class="sr-only">Remove</span>
  </span>
</li>

By default tags are created as bootstrap buttons of default size (.btn-default class) and this code is hardcoded inside pillbox.js file on row 42:

this.$pillHTML = '<li class="btn btn-default pill">'...

How can I change button class to .btn-xs or apply my own class for newly added pills?


solved: just added to event added.fu.pillbox code, suggested below and all newly adding pills (not only existing) immediately applying required class

$('#myPillbox1').on('added.fu.pillbox', function pillboxAddedNew(evt, item) {
$('.btn.btn-default.pill').addClass('btn-xs'); });

where #myPillbox1 is a container for pills

<div id="myPillbox1" data-initialize="pillbox" class="pillbox pills-editable">
<ul class="clearfix pill-group">
<li class="btn btn-default btn-xs pill" data-value="two-value">
    <span>Item 2</span>
    <span class="glyphicon glyphicon-close">
        <span class="sr-only">Remove</span>
    </span>
</li>
...
</ul>
</div>

Solution

  • You need to use jquery for achieve this,

    $(document).ready(
        function(){  
               $('.btn.btn-default.pill').addClass('btn-xs');
        });
    

    This will add your class to that li.

    This will work 100%