我开始使用 ng-bootstrap Typeahead 组件,我对此非常满意。
我想实现的一件事是让下拉项具有与输入字段相同的宽度,而默认行为会根据文本长度应用宽度。它应该是基本的 CSS...
我创建了一个基本的 Example在 Plunker 中。
正如您所注意到的,应用的样式被忽略了:
.dropdown-menu { width: 100%;}
而如果我使用浏览器开发工具,并应用相同的工具。
关于如何通过使用 CSS 实现结果有任何想法吗?
最佳答案
在组件中添加封装:ViewEncapsulation.None
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ngbd-typeahead-template',
templateUrl: 'src/typeahead-template.html',
styleUrls: ['src/typeahead-template.css'],
encapsulation: ViewEncapsulation.None
})
查看更新 plunker
如果没有 ViewEncapsulation.None,该组件中应用的样式只会影响该组件,而不会影响该页面上的任何其他组件。
阅读this了解更多信息
关于css - ng-bootstrap - Typeahead 下拉宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51416897/