如何避免标签输入获得100％的宽度

Question

所以这是一个专门针对Angular输入标签项目的2部分问题。

我目前正在使用它，并且它创建的输入在输入标记本身上设置为宽度100％。因为它在元素本身上，它会覆盖我使用的任何其他样式（除了！important或js）。如果没有任何方法可以解决这个问题吗？

第二部分是达到max-tag数量后可以删除输入部分吗？在达到最大值后仍然能够输入似乎反直觉。

Answer 1

第1部分

您可以使用自定义CSS类更改默认宽度：

<强> HTML

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

<强> CSS

.myclass .host {
  width: 50%;
}

Working Plunker

第2部分

您也可以使用自定义CSS类隐藏输入：

<强> HTML

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

<强> CSS

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

Working Plunker

请注意，用户无法使用键盘删除标签。

Answer 2

实际上设置display:block以及宽度似乎也可以正常工作

Answer 3

由于另一个CSS文件ng-tags-input，我遇到了ace.css的宽度问题，由于宽度值来自ace.css，因此组件的宽度未按预期显示。

为了解决这个问题，我刚刚创建了另一个CSS文件来覆盖ace.css形式的宽度值，在ace.css之后添加它，它现在正在工作。

<强> CSS

.tags {
    width: 80%;
}