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>
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%