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所在组件模板的外部，而且还完全出现在Angular应用程序的外部.检查器中显示的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屋！