Angular Material2 md-sélectionnez la liste déroulante apparaît au bas de la page

Question

J'utilise actuellement Angular Material2 dans une application Angular 2.4.0 (en utilisant @angular/material: 2.0.0-beta.1). Pour une raison quelconque, la liste déroulante md-select, au lieu d'apparaître au-dessus de la valeur initiale ou de l'espace réservé ou de la flèche pour sélectionner la liste déroulante, comme illustré dans ces documents, apparaît tout au bas de la page. Au point que si la liste déroulante md-select est en haut à droite de la page (le composant dans lequel j'essaie de placer le mien est en haut à droite de la page) lorsque vous cliquez sur la flèche pour voir les options déroulantes, vous au bas de la page où ils seront affichés. Ils seront également la largeur totale de la page plutôt que la largeur de la liste déroulante.

Voici mon composant (au moins les bits pertinents - cette application est assez grande + J'ai commenté ou retiré autant de code ne concernant pas la liste déroulante (et supprimé tout dans la vue autre que la liste déroulante pour réduire le question pour moi-même, ainsi que le rendre plus facile pour quiconque de lire ce pour voir le numéro)):

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

le NgModule associé a le MaterialModule importé de façon appropriée. Voici le point de vue entier (haml):

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

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

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

Actuellement, tous les CSS pour l'application entière a été commenté Je sais donc ce n'est pas quelque chose là-dedans qui affecte le menu déroulant. La liste déroulante fonctionne parfaitement et se met à jour correctement avec le constructeur de formulaires, c'est juste que lorsque vous cliquez sur l'erreur de liste déroulante, les options apparaissent soudainement tout en bas de la page et sont aussi larges que la page. Une fois que vous sélectionnez une option, vous revenez à l'endroit où se trouve votre liste déroulante. J'ai cherché partout et ne peux pas sembler trouver quelqu'un d'autre ayant ce problème ou une solution pour cela. Le plus proche que je suis venu était une personne mentionnant dans ce github issue qu'ils avaient ce problème mais ils l'ont corrigé en ajoutant des thèmes. J'ai essayé cela et l'ajout de thèmes n'a pas fait de différence dans la façon dont la liste déroulante a fonctionné. Pour plus de précisions, lorsque j'ai inspecté les options de menu déroulant qui apparaissent au bas de la page, j'ai remarqué qu'elles apparaissent non seulement à l'extérieur du modèle du composant md-select mais à l'extérieur de l'application angulaire. Le code HTML affiché dans l'inspecteur ressemble à quelque chose comme le code suivant (simplifié bien sûr pour supprimer tous les composants qui ne sont pas pertinents pour ce problème). Note: my-app est le sélecteur pour le composant application et cdk-overlay-container comprend le md-select-panel et md-select-content et les options déroulantes):

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

Tout conseil serait apprécié!

Answer 1

J'ai eu le même problème. Je résolus en important le thème matériel:

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

dans ma principale styleseet.

Answer 2

Si vous installez un matériau angulaire à votre projet de cli angulaire alors vos thèmes seraient en node_modules/@ angulaire/matériel/préconstruits thèmes/

importer donc lien serait quelque chose comme illustré ci-dessous

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css" 

Nous devrions ajouter la ligne ci-dessus au fichier styles.css de notre application angular-cli. Ici, deeppurple-amber.css est l'un des thèmes pré-construits que le matériau angulaire nous offre. La plupart des composants intégrés tels que md-select ne fonctionneront pas comme prévu si cette importation n'a pas été effectuée correctement.

Bonne programmation :)

Answer 3

J'ai eu le même problème, mais avec le contrôle DatePicker. Il n'apparaissait pas en dessous de la zone de texte, mais en bas de la page.

J'ai essayé ce que l'autre réponse recommandée et l'importation d'un thème dans le fichier styles.css:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 

et qui n'a pas fonctionné pour moi par lui-même, mais il était un pas dans la bonne direction.

Mais je devais aussi faire un changement couple au fichier app.module.ts:

Ajouter ce aux importations:

import {OverlayContainer} from '@angular/material'; 

Et changer la déclaration module de l'application de la classe:

export class AppModule { 
constructor(overlayContainer: OverlayContainer) { 
    overlayContainer.themeClass = 'unicorn-dark-theme'; 
} 

Vous pouvez trouver plus d'informations sur ce ici:

Après avoir fait tout cela, le sélecteur de date a commencé à travailler pour moi et ne pas apparaître au bas de la page lorsque l'on clique dessus.