ng-bootstrap-提前输入下拉宽度 [英] ng-bootstrap - Typeahead dropdown width

问题描述

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

I started using the ng-bootstrap Typeahead component and I'm pretty happy with that.

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

One thing I would like to achieve is to get the dropdown items to have the same width as the input field, while the default behavior applies a width accordingly to the text length. It should be basic CSS...

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

I created a basic Example in Plunker.

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

As you can note, the applied style is ignored:

.dropdown-menu { width: 100%;}

如果我使用浏览器开发工具，并应用与所应用的相同的工具.

While if I use browser dev tools, and apply the same it is applied.

关于使用CSS如何获得结果的任何想法?

Any idea on how to achieve the result, by using CSS?

推荐答案

向组件添加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
})

请参阅更新的朋克车

没有ViewEncapsulation.None，此组件中应用的样式只会影响此组件，而不会影响此页面上的任何其他组件.

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

阅读此以获取更多信息

这篇关于ng-bootstrap-提前输入下拉宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！