Question

我需要自定义md-select，以便选项列表更像传统的选择。选项应显示在select元素下方，而不是悬停在元素顶部。有没有人知道存在这样的事情，或者如何实现这个目标？

Answer 1

你去了 - 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 2

这适用于Angular 2 +的材料

使用MouseProc选项，例如：

LRESULT CALLBACK MouseProc(int nCode, WPARAM wParam, LPARAM lParam)
{
    if (nCode == HC_ACTION)
    {
        auto &ms = * (const MOUSEHOOKSTRUCT *) lParam;
        if (wParam == WM_MOUSEMOVE)
        {
            cout << "X : " << ms.pt.x << " Y: " << ms.pt.y << "\n";
        }
    }
    return CallNextHookEx(hMSHook, nCode, wParam, lParam);
}

Answer 3

您可以尝试这样的事情：

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

您必须覆盖＆＃34; 顶部＆＃34; CSS类＆＃34; .md-select-menu-container ＆＃34;。

为此，您必须使用属性 md-container-class ，如：

md-container-class="dropDown"

在md-select标记内。那么你只需要为声明的类创建一个自定义css：

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

！important 是关键！ top是你想要的值......在这种情况下是147px。

这里是CodePen

Answer 5

对于使用md-select的cdk-overlay（cdk-panel）的人。

假设您在工作环境中使用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（Pug）

        .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;
}

Answer 6

所以这就是我与Javascript和setTimeout一样的事情，就像解决方案一样丑陋。您不能仅使用CSS有效地执行此操作，因为材质设计使用下拉列表的javascript定位。因此，我必须将一个函数附加到其中的弹出窗口，我设置了200ms的超时，计算屏幕上下拉的所需位置并将其移动到那里。我还在控制器中将一个函数附加到一个窗口调整大小事件，因此它将随着调整大小而移动。

最终你必须使用超时来获得材料设计时间来完成弹出窗口的基于javascript的移动，然后自己移动它。我还使用一个技巧来隐藏它，同时移动正在进行，因此用户看不到跳跃。这就是我必须要做的事情的描述，以防其他人尝试类似的事情。

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

6 个答案: