Как управлять md-выберите выпадающее положение в угловом материале

вот CodePen

использовать . От 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'}
        ];
      });
})();

привет, может быть, попробуйте что-то вроде этого:

    $('.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/

один пост, кажется, имеет ту же проблему:как я могу сделать подменю в раскрывающемся списке MaterializeCSS?

вы должны переопределить "top "класса CSS".md-select-menu-контейнер".

чтобы сделать это, вы должны использовать атрибут MD-container-class как:

md-container-class="dropDown"

внутри md-select тег. тогда вам просто нужно создать пользовательский css для класса, объявленного:

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

!важно!--4--> ключ здесь! топ-это значение, которое вы хотите... в этом случае 147px.

здесь CodePen

для людей, у которых есть cdk-overlay (cdk-panel) с md-select.

предположим, что вы используете Angular 2, Typescript, Pug и Material Design Lite (MDL) в рабочей среде.

функция, стили которой md-select работает по щелчку.

Javascript (TypeScript) в компоненте

    @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, который переопределяет Material Design Lite (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;
}

это относится к материалу для угловых 2+

использовать , например:

<mat-select disableOptionCentering>
  <mat-option *ngFor="let movie of movies" [value]="movie.value">
    {{ movie.viewValue }}
  </mat-option>
</mat-select>