Angular Material2 md-select下拉菜单出现在页面底部
我目前正在使用Angular 2.4.0应用程序中的Angular Material2 (使用@angular/material: 2.0.0-beta.1)。由于某些原因，md-select下拉菜单不是出现在初始值、占位符或箭头上方以选择下拉菜单(如材料文档中的这些examples所示)，而是一直显示在页面底部。如果md-select下拉菜单位于页面的右上角(我正在尝试放置的组件位于页面的右上角)，则当您单击箭头查看下拉选项时，它会滚动到页面底部，显示这些选项。它们也将是整个页面的宽度，而不是下拉列表的宽度。
这是我的组件(至少是相关的部分-这个应用程序相当大，我注释掉或删除了许多与下拉菜单无关的代码(并删除了视图中除下拉菜单之外的所有代码，以缩小我自己的范围，同时也让阅读本文的人更容易看到问题))：
import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my-component.component.html',
styleUrls: ['my-component.component.css'],
providers: [FormBuilder]
})
export class MyComponent implements OnInit {
@Input() page: Page;
canvasBackgroundColors: string[] = ['White', 'Pink', 'Black'];
draftModule: FormGroup;
// --- Component Constructor ---
constructor(private formBuilder: FormBuilder){}
// --- Angular LifeCycle Hooks ---
ngOnInit() {
this.formBuilderInit();
}
// --- UI Delegates ---
public onSave() {
debugger;
}
// --- Private Helpers ---
private formBuilderInit() {
this.draftModule = this.formBuilder.group({
canvasBackgroundColor: this.page.canvasBackgroundColor,
});
this.draftModule.valueChanges.subscribe(draftMod => {
console.log('Test Module', draftMod);
})
}
}关联的NgModule会相应地导入MaterialModule。这是整个视图(haml)：
%form{'[formGroup]' => 'draftModule', '(ngSubmit)' => 'onSave()'}
%md-select{'formControlName' => 'canvasBackgroundColor'}
%md-option{'*ngFor' => 'let color of canvasBackgroundColors', :value => '{{color}}'}
{{color}}
%button{:type => 'submit'}
Save目前，整个应用程序的所有CSS都已经被注释掉了，所以我知道它不会影响下拉列表。dropdown使用表单生成器完美地工作并正确更新，只是当你点击dropdown错误时，选项突然出现在页面的底部，和页面一样宽。一旦你选择了一个选项，你就会滚动回你的下拉框所在的位置。我到处寻找，似乎找不到任何其他人有这个问题或解决它的方法。最接近我的是一个人在这篇github issue中提到他们有这个问题，但他们通过添加主题解决了这个问题。我试过了，添加主题并没有改变下拉菜单的工作方式。
为了进一步澄清，当我检查出现在页面底部的下拉选项时，我注意到它们不仅出现在md-select所在的组件模板之外，而且完全出现在angular应用程序之外。检查器中显示的html类似于以下代码(当然，简化后的代码删除了与此问题无关的所有组件)。注意：my-app是app组件的选择器，cdk-overlay-container包括md-select-panel和md-select-content以及下拉选项)：
<html>
<head></head>
<body id="body" class>
<my-app>
<my-component>
<md-select></md-select>
</my-component>
</my-app>
<div class="cdk-overlay-container"></div>
</body>
</html>如有任何建议，我们将不胜感激！
回答 3
Stack Overflow用户
发布于 2017-02-08 00:26:09
我也有同样的问题。我通过导入material主题解决了这个问题：
@import '~@angular/material/core/theming/prebuilt/[one-of-the-themes].css';
在我的主样式集中。
Stack Overflow用户
发布于 2017-06-05 15:25:48
如果你正在安装angular material到你的angular cli项目，那么你的主题应该是node_modules/@angular/material/prebuilt-themes/格式的。
因此导入链接将如下所示
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"我们应该将上面的代码行添加到angular-cli应用程序的styles.css文件中。深度紫色-amber.css是为我们提供的预建主题角度材质之一。如果此导入没有正确完成，大多数内置组件(如md-select )将无法正常工作。
快乐编码:)
Stack Overflow用户
发布于 2017-07-28 05:51:08
我也有同样的问题，但是datepicker控件。它不是在文本框下面弹出的，而是在页面底部出现的。
我尝试了另一个答案的建议，并将一个主题导入到styles.css文件中：
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';这对我来说是行不通的，但这是朝着正确的方向迈出的一步。
但我还需要对app.module.ts文件进行一些更改：
将以下内容添加到导入中：
import {OverlayContainer} from '@angular/material';并更改app模块类声明：
export class AppModule {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.themeClass = 'unicorn-dark-theme';
}你可以在这里找到更多的信息：
https://material.angular.io/guide/theming
做完这一切后，日期选择器开始为我工作，并且在单击时不会在页面底部弹出。
https://stackoverflow.com/questions/41913703
复制相似问题
腾讯云开发者
