How to set coloring of tags in ngTagsInput?

Question

I want to use ng-tags-input in my project.

I try to set diffrent color for each tag according to color property object in array.

Here is plunker I am working on.

For this purpose I need to override tag-item css class in ng-input template.

Here is the example of ng-input template:

<script type="text/ng-template" id="tag-template">
       <div class="tags-input" ng-style="{background: data.color}">

      <span>{{$getDisplayText()}}</span>
      <a class="remove-button" ng-click="$removeTag()">&#10006;</a>
  </div>

in this row I try to override tags-input css class:

 <div class="tags-input" ng-style="{background: data.color}">

And here is result I get:

as you can see on left and right edges not colored.

Any idea what I am doing wrong?And how to override the tags-input css class??

Answer 1

If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.

So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:

/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
  padding: 0;
  height: 27px;
}

.tags-input {
  padding: 0 5px;
  border-radius: 2px;
}

Here's your plunkr modified to make that happen.