angularjs - 如何避免标签输入宽度为 100%

Question

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

我目前正在使用它，它创建的输入在输入标签本身上设置为 100% 的宽度。因为它在元素本身上，所以它覆盖了我使用的任何其他样式（除了！important 或 js）。没有分叉项目有什么办法可以关闭它？

第二部分是一旦达到最大标签数量，我可以删除输入部分吗？在达到最大值后仍然能够输入似乎违反直觉。

score 3 · Accepted Answer

第1部分

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

HTML

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

CSS

.myclass .host {
  width: 50%;
}

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

HTML

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

CSS

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

但请记住，用户将无法使用键盘删除标签。

score 0 · Accepted Answer

0

实际上display:block与宽度一起设置似乎也有效

于 2015-07-23T13:21:03.013 回答

score 0 · Accepted Answer

ng-tags-input由于另一个 CSS 文件，我遇到了关于宽度的问题，ace.css组件的宽度没有按预期出现，因为宽度值来自表单ace.css。

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

CSS

.tags {
    width: 80%;
}