ng-bootstrap - Typeahead 下拉宽度答案

【问题标题】：ng-bootstrap - Typeahead dropdown widthng-bootstrap - Typeahead 下拉宽度
【发布时间】：2018-12-27 06:03:03
【问题描述】：

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

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

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

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

.dropdown-menu { width: 100%;}

如果我使用浏览器开发工具，并应用它所应用的工具。

知道如何使用 CSS 实现结果吗？

【问题讨论】：

标签： css angular bootstrap-4 ng-bootstrap

【解决方案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

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

阅读this了解更多信息

【讨论】：

这种方法的问题是样式被应用到整个应用程序中匹配的每个元素（如style.css中）。还有什么范围更广的吗？
恐怕没有任何办法。 ngb-typeahead-window 是由 typeahead 库动态添加的组件，正如我在答案中提到的，组件中应用的样式（无封装：ViewEncapsulation.None）只会影响该组件，而不影响此页面上的任何其他组件或即使在同一个组件内。要使其在组件外部生效，请将其全局包含在 css 中，或设置封装：ViewEncapsulation.None

【解决方案2】：

对我来说工作 ng-deep。看起来更安全，范围更广：

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

【讨论】：

也为我工作

【解决方案3】：

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

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

或

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

不确定哪个是最佳选择，但我倾向于考虑第一个。

【讨论】：

【解决方案4】：

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

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

.dropdown-menu { width: 300px;}

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

【讨论】：

【解决方案5】：

此代码 100% 有效，但是对于 .dropdown-menu 类，任何其他下拉菜单都会更改

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

所以我只是用ngb-typeahead-作为ID的这段代码：

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

【讨论】：

【解决方案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 .

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

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

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

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

【讨论】：