Angular Material2 md-select 下拉列表出现在页面底部 [英] Angular Material2 md-select dropdown appears at bottom of the page

问题描述

我目前在 Angular 2.4.0 应用程序中使用 Angular Material2(使用 @angular/material: 2.0.0-beta.1).出于某种原因，md-select 下拉列表，而不是出现在初始值或占位符或箭头上以选择下拉列表，如这些 示例 来自材料文档，一直出现在页面底部.如果 md-select 下拉列表位于页面右上角(我尝试放置的组件位于页面右上角)，当您单击箭头查看下拉选项时，它将滚动到将显示它们的页面底部.它们也将是页面的全宽，而不是下拉菜单的宽度.

I'm currently using Angular Material2 in an Angular 2.4.0 application (using @angular/material: 2.0.0-beta.1). For some reason, the md-select dropdown, instead of appearing over the initial value or placeholder or arrow to select the dropdown, as demonstrated in these examples from the material docs, appears all the way at the bottom of the page. To the point that if the md-select dropdown is at the top right of the page (the component I am attempting to place mine in is at the top right of the page) when you click the arrow to view the dropdown options it will scroll you to the bottom of the page where they will be displayed. They will also be the full width of the page rather than the width of the dropdown.

这是我的组件(至少是相关部分 - 这个应用程序相当大 + 我注释掉或删除了与下拉列表无关的尽可能多的代码(并删除了视图中除下拉列表之外的所有内容以缩小问题范围)为我自己以及让任何阅读本文的人更容易看到问题)):

Here is my component (at least the relevant bits - this app is fairly large + I commented out or removed as much code not relating to the dropdown (and removed everything in the view other than the dropdown to both narrow down the issue for myself as well as make it easier for anyone reading this to see the issue)):

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):

The associated NgModule has the MaterialModule imported appropriately. Here is the entire view (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 都已被注释掉，所以我知道它不会影响下拉列表.下拉菜单可以完美地工作并使用表单构建器正确更新，只是当您单击下拉错误时，选项突然显示在页面底部并与页面一样宽.选择一个选项后，您会向上滚动到下拉框所在的位置.我到处搜索，似乎找不到其他人遇到此问题或解决此问题.我最接近的是一个人在这个 github 问题中提到他们有这个问题，但他们通过添加主题修复了它.我试过了，添加主题对下拉菜单的工作方式没有影响.

Currently all the CSS for the entire app has been commented out so I know it's not something in there affecting the dropdown. The dropdown works perfectly and updates properly with form builder, its just that when you click the dropdown error the options suddenly show up all the way at the bottom of the page and are as wide as the page. Once you select an option you get scrolled back up to where your dropdown box is. I have searched everywhere and can't seem to find anyone else having this problem or a fix for it. The closest I came was one person mentioning in this github issue that they had this problem but they fixed it by adding theming. I tried this and adding theming did not make a difference in the way the dropdown worked.

为了进一步说明，当我检查出现在页面底部的下拉选项时，我注意到它们不仅出现在 md-select 所在的组件模板之外，而且出现在角度应用程序完全.检查器中显示的 html 类似于以下代码(当然已简化以删除与此问题无关的所有组件).注意:my-app 是应用组件的选择器，cdk-overlay-container 包括 md-select-panel 和 md-select-content 和下拉选项):

For further clarification, when I inspect the dropdown options that appear at the bottom of the page I noticed that they appear not just outside of the component's template that md-select is in, but outside of the angular app entirely. The html shown in the inspector looks something like the following code (simplified of course to remove all the components that are not relevant to this issue). Note: my-app is the selector for the app component and cdk-overlay-container includes the md-select-panel and md-select-content and the dropdown options):

 <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>

任何建议将不胜感激！

推荐答案

我遇到了同样的问题.我通过导入材料主题解决了它:

I had the same problem. I resolved it by importing the material theme:

@import '~@angular/material/core/theming/prebuilt/[one-of-the-themes].css';

在我的主要样式表中.

这篇关于Angular Material2 md-select 下拉列表出现在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！