Angular 角度材料2 md选择下拉列表出现在页面底部

我目前正在Angular 2.4.0应用程序中使用Angular Material2（使用

@Angular/material:2.0.0-beta.1

）。出于某种原因，md select下拉列表会一直显示在页面底部，而不是出现在初始值或占位符或箭头上方，以选择下拉列表，如material docs中的这些内容所示。如果md select下拉列表位于页面的右上角（我尝试放置我的组件位于页面的右上角），当您单击箭头查看下拉选项时，它会将您滚动到页面的底部，并显示这些选项。它们也将是页面的全宽，而不是下拉列表的宽度

这是我的组件（至少是相关的部分-此应用程序相当大+我注释掉或删除了与下拉列表无关的代码（并删除了视图中除下拉列表以外的所有内容，以缩小我自己的问题范围，并使阅读此应用程序的人更容易看到问题））：

关联的

NgModule

已正确导入

MaterialModule

。 以下是整个视图（haml）：

目前，整个应用程序的所有CSS都被注释掉了，所以我知道这并不会影响下拉列表。下拉菜单可以完美地工作，并且可以通过form builder正确更新，只是当您单击下拉菜单错误时，选项会突然出现在页面底部，并且与页面一样宽。一旦你选择了一个选项，你就会被卷回下拉框所在的位置。我到处都找遍了，似乎找不到其他人有这个问题或解决方法。最接近我的是一个人在这篇文章中提到他们有这个问题，但他们通过添加主题来解决它。我尝试了这个，添加主题并没有改变下拉菜单的工作方式

为了进一步澄清，当我检查页面底部出现的下拉选项时，我注意到它们不仅出现在

md select

所在的组件模板之外，而且完全出现在angular应用程序之外。inspector中显示的html类似于下面的代码（当然简化为删除与此问题无关的所有组件）。注意：

my app

是app组件的选择器，

cdk overlay container

包括

md选择面板

和

md选择内容

以及下拉选项）：

---

任何建议都将不胜感激

我也有同样的问题。我通过导入材料主题解决了此问题：

---

@import'~@angular/material/core/theming/prebuild/[其中一个主题].css'如果要将angular material安装到angular cli项目中，则主题将位于节点_modules/@angular/material/prebuild themes中/

导入链接如下所示

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"

我们应该将上述行添加到angular cli应用程序的styles.css文件中。这里的deeppurple-amber.css是我们提供的预构建主题Angle material之一。
如果导入操作不正确，大多数内置组件（如
md select
）将无法正常工作

愉快的编码：）
我也有同样的问题，但是日期选择器控件。它不是在文本框下方弹出，而是在页面底部

我尝试了另一个答案的建议，并将主题导入styles.css文件：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

这本身对我来说并不奏效，但这是朝着正确方向迈出的一步

但我还需要对app.module.ts文件进行一些更改：

将此添加到导入中：

import {OverlayContainer} from '@angular/material';

并更改应用程序模块类声明：

export class AppModule {
constructor(overlayContainer: OverlayContainer) {
    overlayContainer.themeClass = 'unicorn-dark-theme';
}

您可以在此处找到有关此的更多信息：


完成所有这些之后，日期选择器开始为我工作，当单击时不会出现在页面底部。
您是如何管理css模板的？如果你有太多的选项，它们将使用你的设备维度溢出边界。嗨@RomanC我不完全确定我是否理解你的问题，因为我注释掉了我的大多数CSS模板，以便尝试缩小问题范围，因此我的大多数CSS模板现在没有任何内容，md select下拉选项也没有问题显示在页面底部的内容仍然存在。这是太多，包括在一个评论，但我更新了我的问题与所有的CSS的情况下，仍然有帮助。我目前正在测试的设备是一个15英寸的屏幕。@RomanC我刚刚浏览并注释掉了应用程序的所有CSS，并在不破坏应用程序的情况下删除了尽可能多的组件，问题仍然存在。我再次更新了我原来的问题，因为我注意到md select选项的html不仅出现在md select所在组件的div之外，而且出现在整个angular应用程序之外，这似乎是一个bug。如果有人知道这个问题的解决方法，那就太好了。嗨，是的，我不知道你是否注意到了，但在我的原始帖子中我提到，在我发现的一个github问题中（我在上面链接到），有人通过导入主题解决了这个问题，但导入主题并没有解决我的问题。不幸的是，我认为在我的例子中，css.import{OverlayContainer}来自“@angular/cdk/overlay”；，可能发生了更奇怪的事情；，不是“@角度/材质”
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

import {OverlayContainer} from '@angular/material';

export class AppModule {
constructor(overlayContainer: OverlayContainer) {
    overlayContainer.themeClass = 'unicorn-dark-theme';
}