El menú desplegable Material angular2 md-select aparece en la parte inferior de la página

Question

Jan 28, 2017, 08:06 PM

angular material-design haml angular-material2 md-select

El menú desplegable Material angular2 md-select aparece en la parte inferior de la página

Actualmente estoy usando Angular Material2 en una aplicación Angular 2.4.0 (usando@angular/material: 2.0.0-beta.1) Por alguna razón, el menú desplegable md-select, en lugar de aparecer sobre el valor inicial o el marcador de posición o la flecha para seleccionar el menú desplegable, como se demuestra en estosejemplos de los documentos de material, aparece hasta el final de la página. Hasta el punto de que si el menú desplegable md-select está en la parte superior derecha de la página (el componente en el que intento colocar el mío está en la parte superior derecha de la página) cuando hace clic en la flecha para ver las opciones desplegables, se desplazará ir a la parte inferior de la página donde se mostrarán. También serán el ancho completo de la página en lugar del ancho del menú desplegable.

Aquí está mi componente (al menos los bits relevantes: esta aplicación es bastante grande + Comenté o eliminé tanto código que no se relaciona con el menú desplegable (y eliminé todo en la vista que no sea el menú desplegable para reducir el problema por mí mismo) así como facilitar que cualquiera que lea esto vea el problema)):

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);
    })
  }
}

La asociadaNgModule tiene elMaterialModule Importado apropiadamente. Aquí está la vista completa (haml):

%form{'[formGroup]' => 'draftModule', '(ngSubmit)' => 'onSave()'}

  %md-select{'formControlName' => 'canvasBackgroundColor'}
    %md-option{'*ngFor' => 'let color of canvasBackgroundColors', :value => '{{color}}'}
      {{color}}

  %button{:type => 'submit'}
    Save

Actualmente, todo el CSS para toda la aplicación ha sido comentado, así que sé que no hay algo allí que afecte el menú desplegable. El menú desplegable funciona perfectamente y se actualiza correctamente con el generador de formularios, es solo que cuando hace clic en el error desplegable, las opciones aparecen repentinamente en la parte inferior de la página y son tan anchas como la página. Una vez que seleccione una opción, volverá a desplazarse hasta donde está su cuadro desplegable. He buscado en todas partes y parece que no puedo encontrar a nadie más que tenga este problema o una solución para él. Lo más cerca que estuve fue una persona que menciona en esteproblema de github que tenían este problema pero lo arreglaron agregando temas. Intenté esto y agregarlos no hizo una diferencia en la forma en que funcionaba el menú desplegable.

Para mayor aclaración, cuando inspecciono las opciones desplegables que aparecen en la parte inferior de la página, noté que aparecen no solo fuera de la plantilla del componente quemd-select está dentro, pero fuera de la aplicación angular por completo. El html que se muestra en el inspector se parece al siguiente código (simplificado, por supuesto, para eliminar todos los componentes que no son relevantes para este problema). Nota:my-app es el selector para el componente de la aplicación ycdk-overlay-container incluye elmd-select-panel ymd-select-content y las opciones desplegables):

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

Cualquier consejo sería apreciado!