O menu suspenso de seleção md de material angular é exibido na parte inferior da página
Atualmente, estou usando o Angular Material2 em um aplicativo Angular 2.4.0 (usando@angular/material: 2.0.0-beta.1) Por alguma razão, o menu suspenso md-select, em vez de aparecer sobre o valor inicial, espaço reservado ou seta para selecionar o menu suspenso, conforme demonstrado nestesexemplos dos documentos do material, aparece todo o caminho na parte inferior da página. Ao ponto em que, se o menu suspenso md-select estiver no canto superior direito da página (o componente no qual estou tentando colocar o meu está no canto superior direito da página), quando você clicar na seta para visualizar as opções do menu suspenso, ele irá rolar você na parte inferior da página onde eles serão exibidos. Eles também terão a largura total da página e não a largura da lista suspensa.
Aqui está o meu componente (pelo menos os bits relevantes - este aplicativo é bastante grande + comentei ou removi o máximo de código que não está relacionado ao menu suspenso (e removi tudo na exibição, exceto o menu suspenso, para diminuir o problema por conta própria como além de facilitar para quem lê isso ver o 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);
})
}
}
O associadoNgModule tem oMaterialModule importados adequadamente. Aqui está a visualização inteira (haml):
%form{'[formGroup]' => 'draftModule', '(ngSubmit)' => 'onSave()'}
%md-select{'formControlName' => 'canvasBackgroundColor'}
%md-option{'*ngFor' => 'let color of canvasBackgroundColors', :value => '{{color}}'}
{{color}}
%button{:type => 'submit'}
Save
Atualmente, todo o CSS de todo o aplicativo foi comentado, então eu sei que não há algo afetando a lista suspensa. A lista suspensa funciona perfeitamente e é atualizada corretamente com o criador de formulários, é só que, quando você clica no erro suspenso, as opções aparecem subitamente na parte inferior da página e são tão largas quanto a página. Depois de selecionar uma opção, você volta para a sua caixa suspensa. Eu procurei em todos os lugares e não consigo encontrar mais alguém com esse problema ou uma solução para ele. O mais próximo que cheguei foi de uma pessoa mencionandoquestão do github que eles tinham esse problema, mas o corrigiram adicionando temas. Eu tentei isso e adicionar temas não fez diferença na maneira como o menu suspenso funcionou.
Para maiores esclarecimentos, ao inspecionar as opções suspensas que aparecem na parte inferior da página, notei que elas não aparecem apenas fora do modelo do componente quemd-select está dentro, mas completamente fora do aplicativo angular. O html mostrado no inspetor se parece com o código a seguir (simplificado, é claro, para remover todos os componentes que não são relevantes para esse problema). Nota:my-app é o seletor para o componente do aplicativo ecdk-overlay-container inclui omd-select-panel emd-select-content e as opções suspensas):
<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>
Qualquer conselho seria apreciado!