Matériau angulaire de MD-select Dropdown positionnement

Question

construction actuellement une application dans angulaire 4.1.3, 1.1.1-cli angulaire, la matière angulaire 2.0.0

Le comportement d'incrustation md-select normale semble décaler la position de la superposition vers le haut ou vers le bas pour que la sélection actuelle se trouve au-dessus du champ de saisie correspondant, vous pouvez voir cette fonctionnalité dans la démo:

Cela ressemble à une interface utilisateur solide pour une liste de 3 éléments, mais qui fonctionne Avec une liste de plus de 20 éléments, la liste change radicalement (la sélection d'une option en bas de la liste entraîne la progression de la liste jusqu'à couvrir les autres champs de saisie ci-dessus.)

J'essaie de trouver un moyen d'avoir la sélection superposition déroulant soit stationnaire (toujours en dessous du champ de saisie lui-même). J'ai essayé d'éditer la méthode _calculateOverlayPosition sur le prototype de la classe MdSelect mais je n'ai pas eu beaucoup de succès. Quelqu'un a-t-il rencontré ce problème? Le modèle et le contrôleur associé sont très emporte-pièce.

Modèle:

<md-select (change)="currencySelected()" formControlName="currency" 
    <md-option *ngFor="let currency of currencies 
    [value]="currency.label"> 
    {{ currency.label }} - {{ currency.description }} 
    </md-option> 
</md-select> 

Answer 1

Avec l'aide d'un collègue de travail que je réussi à étendre/modifier la méthode calculateOverlayPosition par une coutume util qui obtient en tout temps utilisé MdOptionSelectionChange exécute.

_mdSelect.prototype._calculateOverlayPosition = function() { 
    const items = this._getItemCount(); 
    const panelHeight = Math.min(items * SELECT_ITEM_HEIGHT, 
    SELECT_PANEL_MAX_HEIGHT); 
    const scrollContainerHeight = items * SELECT_ITEM_HEIGHT; 

    // The farthest the panel can be scrolled before it hits the bottom 
    const maxScroll = scrollContainerHeight - panelHeight; 

    let groupLabels = countGroupLabelsBeforeOption(0, this.options, 
    this.optionGroups); 

    this._offsetY = (SELECT_ITEM_HEIGHT - SELECT_TRIGGER_HEIGHT)/2 * -1 - (groupLabels * SELECT_ITEM_HEIGHT); 

    // Add 40 pixels to the y-axis to align dropdown below the input field 
    this._offsetY = this._offsetY + 40; 

    this._checkOverlayWithinViewport(maxScroll); 
}