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);
})
}
}
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
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.
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>
Any advice would be appreciated!
