如何在角度材料中控制md-select下拉位置

Question

我需要自定義md-select，以使選項列表更像傳統選擇。這些選項應顯示在select元素的下方，而不是懸停在元素的頂部。有沒有人知道存在這樣的事情，或者如何做到這一點？

Answer 1

原來這竟然是一些我曾與Javascript和setTimeout的做，醜陋的解決方案。只有在材料設計使用下拉列表的javascript定位時，纔能有效地使用CSS進行此操作。因此，我不得不在附近的彈出窗口中添加一個函數，我設置了一個200ms的超時時間，用於計算屏幕上下拉的所需位置並將其移動到那裏。我還將控制器中的函數附加到窗口大小調整事件，以便它隨着調整大小移動。

最終，您必須使用超時才能獲得材料設計時間來執行基於JavaScript的移動彈出窗口，然後自行移動它。當移動發生時，我也使用一種技巧來隱藏它，以便用戶看不到跳躍。這就是爲了防止其他人嘗試類似的情況，我必須做的描述。

Answer 2

嗨也許嘗試這樣的事：

$('.dropdown-button2').dropdown({ 
     inDuration: 300, 
     outDuration: 225, 
     constrain_width: false, // Does not change width of dropdown to that of the activator 
     hover: true, // Activate on hover 
     gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge 
     belowOrigin: false, // Displays dropdown below the button 
     alignment: 'left' // Displays dropdown with edge aligned to the left of button 
    } 
); 

https://jsfiddle.net/fb0c6b5b/

一個員額似乎有同樣的問題：How can I make the submenu in the MaterializeCSS dropdown?

Answer 3

在這裏你去 - CodePen

使用md-container-class屬性。從docs：

標記

<div ng-controller="AppCtrl" class="md-padding" ng-cloak="" ng-app="MyApp"> 
    <md-input-container> 
    <label>Favorite Number</label> 
    <md-select ng-model="myModel" md-container-class="mySelect"> 
     <md-option ng-value="myVal" ng-repeat="myVal in values">{{myVal.val}}</md-option> 
    </md-select> 
    </md-input-container> 
</div> 

CSS

.mySelect md-select-menu { 
    margin-top: 45px; 
} 

JS

(function() { 
    'use strict'; 
    angular 
     .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
     .controller('AppCtrl', function($scope) { 
     $scope.required = "required"; 
     $scope.values = [ 
      {val:1, des: 'One'}, 
      {val:2, des: 'Two'} 
     ]; 
     }); 
})(); 

Answer 4

您必須重寫「top「的CSS類」.md-選擇菜單容器「。

要做到這一點，你必須使用屬性MD-容器類，如：

md-container-class="dropDown" 

的md-select標籤內。那麼你只需要創建該類的自定義CSS宣告：

.md-select-menu-container.dropDown{ 
    top: 147px !important; 
} 

重要是這裏的關鍵！頂部是你想要的值...在這種情況下是147px。

這裏有一個CodePen

Answer 5

給使用md-select進行cdk-overlay（cdk-panel）的人。

假設您在工作環境中使用Angular 2，Typescript，Pug和Material Design Lite（MDL）。

函數樣式md-select在點擊時起作用。

Javascript語言，組件（打字稿）

@Component({ 
     selector: .., 
     templateUrl: .., 
     styleUrl: .., 
     // For re-calculating on resize 
     host: { '(window:resize)': 'onResize()' } 
    }) 



    export class MyComponent { 

     //Function to style md-select BEGIN 

     public styleSelectDropdown(event) { 
    var bodyRect = document.body.getBoundingClientRect(); 
    let dropdown = document.getElementsByClassName("cdk-overlay-pane") as HTMLCollectionOf<HTMLElement>; 
    if (dropdown.length > 0) { 
     for(var i = 0; i < dropdown.length; i++) { 
       dropdown[i].style.top = "auto"; 
       dropdown[i].style.bottom = "auto"; 
       dropdown[i].style.left = "auto"; 
     } 
      for(var i = 0; i < dropdown.length; i++) { 
       if (dropdown[i].innerHTML != "") { 
        var getDropdownId = dropdown[i].id; 
        document.getElementById(getDropdownId).classList.add('pane-styleSelectDropdown'); 
       } 
     } 
    } 

    let target = event.currentTarget; 

    let selectLine = target.getElementsByClassName("mat-select-underline") as HTMLCollectionOf<HTMLElement>; 
    if (selectLine.length > 0) { 
     var selectLineRect = selectLine[0].getBoundingClientRect(); 
    } 
    let targetPanel = target.getElementsByClassName("mat-select-content") as HTMLCollectionOf<HTMLElement>; 
    if (targetPanel.length > 0) { 
     var selectLineRect = selectLine[0].getBoundingClientRect(); 
    } 
    if (dropdown.length > 0) { 
     for(var i = 0; i < dropdown.length; i++) { 
      dropdown[i].style.top = selectLineRect.top + "px"; 
      dropdown[i].style.bottom = 0 + "px"; 
      dropdown[i].style.left = selectLineRect.left + "px"; 
     } 
    } 
    var windowHeight = window.outerHeight; 
    if (targetPanel.length > 0) { 
     targetPanel[0].style.maxHeight = window.outerHeight - selectLineRect.top + "px"; 
    } 
} 
public onResize() { 
    this.styleSelectDropdown(event); 
} 
     //Function to style md-select END 


    } 

HTML（帕格）

 .form-container 

      div.styleSelectDropdown((click)="styleSelectDropdown($event)") 
       md-select.form-group(md-container-class="my-container", id = '...', 
        md-option(....) 

CSS將覆蓋材料設計精簡版（MDL）的CSS

.pane-styleSelectDropdown .mat-select-panel { 
    border: none; 
    min-width: initial !important; 
    box-shadow: none !important; 
    border-top: 2px #3f51b5 solid !important; 
    position: relative; 
    overflow: visible !important; 
} 

.pane-styleSelectDropdown .mat-select-panel::before { 
    content: ""; 
    position: absolute; 
    top: -17px; 
    right: 0; 
    display: block; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #3f51b5; 
    margin: 0 4px; 
    z-index: 1000; 
} 

.pane-styleSelectDropdown .mat-select-content { 
    border: 1px solid #e0e0e0; 
    box-shadow: 0 2px 1px #e0e0e0; 
    position: relative; 
} 

@media screen and (max-height: 568px) { 
    .pane-styleSelectDropdown .mat-select-content { 
     overflow-y: scroll; 
    } 
} 

.pane-styleSelectDropdown.cdk-overlay-pane { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    padding-bottom: 5px; 
    z-index: 10000; 
} 

.pane-styleSelectDropdown .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple), 
.pane-styleSelectDropdown .mat-option:focus:not(.mat-option-disabled), 
.pane-styleSelectDropdown .mat-option:hover:not(.mat-option-disabled) { 
    background: #fff !important; 
} 

.pane-styleSelectDropdown .mat-option { 
    line-height: 36px; 
    height: 36px; 
    font-size: 14px; 
}