Clever Geek Handbook

FuelUX Pillbox - change the default class for adding a pill

I am using Pillbox from FuelUX to write tags. Each pill is described as a person in this 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 the default bootstrap buttons (.btn-default class) and this code is hardcoded inside the pillbox.js file on line 42:

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

How do I change the class of the button to .btn-xs, or apply a custom class for the newly added pills?

SOLVED : only added event code added. This code suggested below and all new add pills (not just the existing ones) immediately apply the 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>
+3


source to share


1 answer


You need to use jquery for this,

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


This will add your class to this li.

This will work 100%

0


source






More articles:


All Articles