关键词：
【中文标题】如何控制 Angular Material 中的 md-select 下拉位置【英文标题】：How to control md-select drop down position in Angular Material 【发布时间】：2017-01-25 02:22:11 【问题描述】：我需要自定义一个 md-select 以便选项列表更像传统的选择。选项应显示在选择元素下方，而不是悬停在元素顶部。有谁知道存在这样的事情，或者如何做到这一点？
【问题讨论】：
只需在框架完成其工作后将select 高度添加到element.style.top？或者在设置 top 的第 1591 行附近的某处更改框架源代码？不过，不知道单独更改 top 是否会弄乱预期的 UI。
【参考方案1】：
这适用于 Angular 2+ 的材料
使用disableOptionCentering选项，如：
<mat-select disableOptionCentering>
<mat-option *ngFor="let movie of movies" [value]="movie.value">
movie.viewValue
</mat-option>
</mat-select>
【讨论】：
【参考方案2】：给你 - 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'
];
);
)();
【讨论】：
这并不总是有效。请注意，一旦您选择了值 2，当您再次更改所选值时，现在输入框被部分覆盖。您拥有的选择越多，这一点就越明显。选择一个值后，所选值在列表中的位置越靠下，一旦您再次单击以选择，弹出窗口向上移动的越多。【参考方案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?
【讨论】：
【参考方案4】：致拥有 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(....)
覆盖 Material Design Lite (MDL) css 的 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;
【讨论】：
【参考方案5】：所以结果证明这是我不得不用 Javascript 和 setTimeout 做的事情，就像解决方案一样丑陋。您不能仅使用 CSS 有效地做到这一点，因为材料设计使用下拉菜单的 javascript 定位。结果，我不得不在里面的弹出窗口上附加一个函数，我设置了一个 200 毫秒的超时，计算屏幕上下拉菜单的所需位置并将其移动到那里。我还将控制器中的一个函数附加到一个窗口调整大小事件，因此它会随着调整大小而移动。
最终，您必须使用超时来获得材料设计时间来完成基于 javascript 的弹出框移动，然后自己移动它。我还使用了一个技巧来在移动发生时隐藏它，这样用户就看不到跳跃了。这就是我必须做的事情的描述，以防其他人尝试类似的事情。
【讨论】：
你的解决方案很好，但为什么没有代码示例？ 我有同样的问题，如果没有代码，这没有多大帮助。我不知道为什么这被接受为答案。【参考方案6】：您必须覆盖 CSS 类“.md-select-menu-container”的“top”。
为此，您必须使用 md-container-class 属性，例如：
md-container-class="dropDown"
在md-select 标签内。那么你只需要为声明的类创建一个自定义 css：
.md-select-menu-container.dropDown
top: 147px !important;
!important 是这里的关键！ top 是您想要的值...在本例中为 147px。
这是CodePen
【讨论】：
这将不起作用，因为需要动态计算顶部位置 对不起，但这是您在这里唯一的解决方案......当然是固定位置。我相信这个问题没有具体说明。如果你想要动态，你可以使用md-on-open 来获取 md-select 当前位置并使用 javascript 更新 css 属性。如何合并不在 Google Material for Angular 中的图标？
】如何合并不在GoogleMaterialforAngular中的图标？【英文标题】：HowtoincorporateaniconthatisnotinGoogleMaterialforAngular?【发布时间】：2019-05-0112:37:47【问题描述】：要为Angular使用Material图标，<mat-icon>与图标名称一起使用：<mat-ico... 查看详情
将 Angular Material Design 复选框绑定到控制器中的数组
】将AngularMaterialDesign复选框绑定到控制器中的数组【英文标题】：BindingAngularMaterialDesignCheckboxestoanArrayinController【发布时间】：2015-06-0919:28:35【问题描述】：我有一组材料设计复选框，我想将它们的值绑定到我的控制器中的一个... 查看详情
如何扩展/覆盖 Angular Material $mdDialog.show 中的默认选项？
】如何扩展/覆盖AngularMaterial$mdDialog.show中的默认选项？【英文标题】：Howtoextend/overwritedefaultoptionsinAngularMaterial$mdDialog.show?【发布时间】：2016-09-1717:31:36【问题描述】：TL;DR：我需要一种方法来使用提供程序（与任何其他Angular模... 查看详情
如何更改 Angular Material 步进器中的状态图标？
】如何更改AngularMaterial步进器中的状态图标？【英文标题】：HowtochangestateiconinAngularMaterialstepper?【发布时间】：2019-11-1503:26:59【问题描述】：我正在使用AngularMaterial步进器。使用STEPPER_GLOBAL_OPTIONS，我可以像这样更改步骤的状态... 查看详情
如何将给定的指令值应用于 Angular Material 中的多个标签？
】如何将给定的指令值应用于AngularMaterial中的多个标签？【英文标题】：HowtoapplyagivendirectivevaluetomultipletagsinAngularMaterial?【发布时间】：2021-07-1114:08:56【问题描述】：我最近开始学习Angular和Material，在我的项目中我意识到我必须... 查看详情
如何左对齐 Angular Material 拉伸 md 按钮中的文本？
】如何左对齐AngularMaterial拉伸md按钮中的文本？【英文标题】：HowcanIleftalignthetextinanAngularMaterialstretchedmd-button?【发布时间】：2015-08-0718:49:27【问题描述】：无需过多地修改我自己的CSS，是否有一个属性或配置我可以用来左对齐md-... 查看详情
Angular Material Datepicker：如何过滤以便只允许数组中的日期？
】AngularMaterialDatepicker：如何过滤以便只允许数组中的日期？【英文标题】：AngularMaterialDatepicker:Howtofiltersothatonlydatesinanarrayareallowed?【发布时间】：2020-02-0306:06:26【问题描述】：我有一个从API返回的日期数组。例如，我可能有一... 查看详情
Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？
】Angular5/Material，如何在MatDialog中删除垂直滚动？【英文标题】：Angular5/Material,howtoremoveverticalscrollinMatDialog?【发布时间】：2018-10-0315:11:53【问题描述】：我正在尝试移除材质对话框中的垂直滚动。我正在尝试使用CSS.mat-dialog-contai... 查看详情
Angular Material：如何从组件中的方法内部而不是从 html 关闭 MatSidenav？
】AngularMaterial：如何从组件中的方法内部而不是从html关闭MatSidenav？【英文标题】：AngularMaterial:HowtocloseMatSidenavfrominsideamethodinthecomponentinsteadoffromthehtml?【发布时间】：2021-12-3011:30:38【问题描述】：使用Angular+Angular材质12如果您想... 查看详情
Angular + Material Autocomplete：如何将某些值仅绑定到 md-option 中的模型
】Angular+MaterialAutocomplete：如何将某些值仅绑定到md-option中的模型【英文标题】：Angular+MaterialAutocomplete:Howtobindcertainvaluesonlytomodelinmd-option【发布时间】：2016-04-2212:45:30【问题描述】：我在当前项目中使用Angular和AngularMaterial。我正... 查看详情
Material datePicker（Angular）中的多个日期选择
】MaterialdatePicker（Angular）中的多个日期选择【英文标题】：MultipleDateSelectinMaterialdatePicker(Angular)【发布时间】：2020-03-2618:34:51【问题描述】：我要求用户可以在日期选择器中选择多个日期。如何在AngularMaterial日期选择器中实现多... 查看详情
如何将sidenav（mat-drawer）状态保存到Angular Material中的localstorage？
】如何将sidenav（mat-drawer）状态保存到AngularMaterial中的localstorage？【英文标题】：Howtosavesidenav(mat-drawer)statetolocalstorageinAngularMaterial?【发布时间】：2021-02-1606:13:09【问题描述】：我对AngularMaterial中的垫子抽屉有疑问。我想将我的... 查看详情
Angular Material 中的默认排序 - 排序标题
】AngularMaterial中的默认排序-排序标题【英文标题】：DefaultsortinginAngularMaterial-Sortheader【发布时间】：2018-03-2608:51:34【问题描述】：如何更改下面的AngularMaterial代码，以便数据表按“名称”列排序，默认为升序。必须显示箭头（... 查看详情
Angular Material 中的响应式排版
】AngularMaterial中的响应式排版【英文标题】：ResponsiveTypographyinAngularMaterial【发布时间】：2020-10-0309:41:19【问题描述】：试图弄清楚如何根据屏幕大小（400px以下）设置mat-tab-label的字体大小。我尝试将自定义配置放入像@includemat-ta... 查看详情
如何访问 Angular Material Data-Table 中同一行的不同单元格中的单元格的值？
】如何访问AngularMaterialData-Table中同一行的不同单元格中的单元格的值？【英文标题】：HowcanyouaccessthevalueofacellindifferentcellofthesamerowinAngularMaterialData-Table?【发布时间】：2021-06-0102:23:21【问题描述】：我有一个四列的Angular材料数据... 查看详情
如何在 Angular 4 材料中的 Stepper 中提交表单
...pper中提交表单【英文标题】：HowtosubmitformsinStepperinAngular4material【发布时间】：2018-10-1211:40:21【问题描述】：如何在angularmaterial的stepper中提交表单数据。我正在关注角度材料https://material.angular.io/components/stepper/examples的示例。在... 查看详情
如何向 Angular Material datepicker 的所有实例添加指令？
】如何向AngularMaterialdatepicker的所有实例添加指令？【英文标题】：HowcanIaddadirectivetoallinstancesofAngularMaterialdatepicker?【发布时间】：2021-04-2220:10:48【问题描述】：我创建了一个自定义指令，用于检查角度材料日期选择器(withhelpofhere... 查看详情
Angular 2 Material - 如何居中进度微调器
】Angular2Material-如何居中进度微调器【英文标题】：Angular2Material-HowToCenterProgressSpinner【发布时间】：2017-05-1406:34:32【问题描述】：我已经从下面的链接实现了Angular2进度微调器https://github.com/angular/material2/tree/master/src/lib/progress-spin... 查看详情