How to avoid tag inputs getting width of 100%

Question

So this is a 2 part question specifically for the Angular input tags project.

I am currently using it and the inputs that it creates get set to width 100% on the input tag itself. Because it is on the element itself it overrides any other styling I use (except !important or js). Short of forking the project is there any way to turn this off?

Part two is can I remove the input portion once the max-tag amount is reached? it seems counter intuitive to still be able to type after the max is reached.

Answer 1

Part 1

You can change the default width by using a custom CSS class:

HTML

<tags-input ng-model="tags" class="myclass"></tags-input>

CSS

.myclass .host {
  width: 50%;
}

Working Plunker

Part 2

You can hide the input by using a custom CSS class as well:

HTML

<tags-input ng-model="tags" ng-class="{'hide-input': tags.length > 3}"></tags-input>

CSS

.hide-input .input {
  display: none;
}

Working Plunker.

Keep in mind that the user won't be able to use the keyboard to remove tags, though.