css - ng-bootstrap - Typeahead 下拉宽度

Question

我开始使用 ng-bootstrap Typeahead 组件，我对此非常满意。

我想实现的一件事是让下拉项具有与输入字段相同的宽度，而默认行为会根据文本长度应用宽度。它应该是基本的 CSS...

我创建了一个基本的 Example在 Plunker 中。

正如您所注意到的，应用的样式被忽略了:

.dropdown-menu { width: 100%;}

而如果我使用浏览器开发工具，并应用相同的工具。

关于如何通过使用 CSS 实现结果有任何想法吗？

Answer 1

在组件中添加封装: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了解更多信息