ng-bootstrap-提前输入下拉宽度

Question

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

我想实现的一件事是使下拉菜单项的宽度与输入字段的宽度相同，而默认行为将宽度与文本长度相对应。应该是基本的CSS ...

我在Plunker中创建了一个基本示例。

您可以注意到，所应用的样式将被忽略：

.dropdown-menu { width: 100%;}

如果我使用浏览器开发工具，并且应用相同的工具，则会应用该工具。

使用CSS如何获得结果的任何想法？

Answer 1

添加encapsulation: 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

Without ViewEncapsulation.None, the styles applied in this component will only effect this component and not any other component on this page.

Read this for more information

Answer 2

对我来说很有效。看起来更安全和范围更广：

::ng-deep .dropdown-menu { width: 100%; }

Answer 3

这就是我让它在响应式中工作的方式col：

::ng-deep ngb-typeahead-window.dropdown-menu {
    width: calc(100% - 30px);
}

或者

::ng-deep .dropdown-menu.show {
    width:calc(100% - 30px);
}

不确定哪个是最好的选择，但我倾向于想到第一个。