角材料MD-選擇下拉定位

目前在角4.1.3構建應用程序，角-CLI 1.1.1，角材料2.0.0角材料MD-選擇下拉定位

正常MD-選擇覆蓋行爲似乎移位的位置重疊或向下以便當前選擇位於相應輸入字段的頂部，您可以在演示中看到該功能：https://material.angular.io/components/select/examples

這看起來像一個長3個項目的列表的實體UI，但工作正常列表中有20多個項目會導致列表大幅度移位（在列表底部選擇一個選項會導致整個列表移動到覆蓋其他輸入字段的位置）。

我試圖找到一種方法，有選擇下拉覆蓋是固定的（總是低於輸入字段本身）。我曾嘗試編輯MdSelect類的原型上的_calculateOverlayPosition方法，但我沒有取得太多成功。有沒有人遇到過這個問題？模板和相關的控制器非常靈活。

模板：

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

來源

2017-08-30 Sven E

下面是最下面的位置：http://imgur.com/a/hRd16 –

和同事，我設法擴展/通過自定義編輯calculateOverlayPosition方法UTIL是被用來隨時隨地MdOptionSelectionChange執行的幫助。

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

來源

2017-08-31 22:12:27

角材料MD-選擇下拉定位

回答

相關問題