of-bootstrap - Typeahead 下拉宽度

Question

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

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

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

如您所见，应用的样式被忽略：

.dropdown-menu { width: 100%;}

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

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

Answer 1

@Nandita 的回答是正确的，直接给下拉菜单应用宽度不会影响。

并且您希望下拉菜单具有与输入相同的宽度，因此您应该在 CSS 下面添加到她的回答中：

.dropdown-menu { width: 300px;}

检查结果： https://next.plnkr.co/edit/YvOymCLAwYgU3VmJ

Answer 2

将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

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

阅读this了解更多信息

Answer 3

对我来说工作很深入。看起来更安全，范围更广：

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

Answer 4

此代码 100% 有效，但使用 class .dropdown-menu 任何其他下拉菜单都会发生变化

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

所以我只是用了这段代码，ID是ngb-typeahead-：

::ng-deep [id^="ngb-typeahead-"]{ 
width: 100%!important; 
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;}

Answer 5

使用 scss 应该可以解决问题。在你的dom中找到父div，并给它一个class'dropdown-wrapper'.

.dropdown-wrapper {
  .dropdown-menu {
    width: 90%;
  }
}

将此添加到您的全局 scss。干杯！

Answer 6

扩展 Nandita Sharma 的回答，在 Angular 中关闭 ViewEncapsulation 时，将任何 CSS 规则的范围限定到组件可能是个好主意。这将避免在全局 CSS 范围内泄漏一般命名的类。

一个非常简单的方法是在组件的选择器内限定所有内容：

// Name of the component containing the typeahead
app-parent-selector {
  // Rules added here won't leak out into the global CSS scope
  .dropdown-menu {
    width: 400px;
  }
}

避免使用任何使用阴影穿透后代组合器（::ng-deep、/deep/ 或 >>>）的方法也是明智的，因为对它们的支持正在逐渐从所有主要浏览器中移除并且 will eventually be removed from Angular.

Answer 7

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

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

或

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

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

Answer 8

如果您计划在所有页面中以相同的方式使用预先输入字段，最好的办法是在全局范围内添加它。如果您有一个 styles.scss 可以容纳所有全局样式，请在此处添加：

ngb-typeahead-window {
    width:calc(100% - 30px);

    .dropdown-item {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

of-bootstrap - Typeahead 下拉宽度

ng-bootstrap - Typeahead dropdown width

css

bootstrap-4

ng-bootstrap

angular