如何控制角度材质中的md-select下拉位置

Question

I need to customize a md-select so that the option list acts more like a traditional select. The options should show up below the select element instead of hovering over top of the element. Does anyone know of something like this that exists, or how to accomplish this?

Answer 1

Here you go - CodePen

Use the md-container-class attribute. From the docs :

Markup

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

This applies to Material for Angular 2+

Use disableOptionCentering option, such as:

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

Answer 3

Hi maybe try something like this:

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

One post seems have the same issue: How can I make the submenu in the MaterializeCSS dropdown?

Answer 4

You must override " top " of the CSS class " .md-select-menu-container ".

To do so, you have to use the attribute md-container-class like:

md-container-class="dropDown"

inside the md-select tag. then you just have to create a custom css for the class declared:

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

!important is the key here! top is the value you want... in this case 147px.

here's a CodePen

Answer 5

To people who has cdk-overlay (cdk-panel) with md-select.

Suppose that you use Angular 2, Typescript, Pug and Material Design Lite (MDL) in working environment.

Function which styles md-select works on click.

Javascript (TypeScript) in component

    @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 (Pug)

        .form-container

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

CSS which overrides 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;
}

Answer 6

So this turned out to be something I had to do with Javascript and setTimeout, as ugly as the solution is. You can't effectively do this with CSS only as material design uses javascript positioning of the drop down. As a result I had to attach a function to the popup opening inside there I set a 200ms timeout that calculates the desired position of the drop down on the screen and moves it there. I also attached a function in the controller to a window resize event so it will move with a resize.

Ultimately you have to use a timeout to get material design time to do it's javascript based move of the popover and then move it yourself. I also uses a trick to hide it while the moving is taking place so the user doesn't see the jump. That's the description of what I had to do just in case someone else attempts similar.