How to control the dropdown position of md-select in Angular Material

Question

I need to configure md-select so that the list of options looks more like a traditional choice. Parameters should appear below the select element instead of hovering over the top of the element. Does anyone know something like this that exists, or how to do it?

Answer 1

So this turned out to be something that I had to do with Javascript and setTimeout, as ugly as the solution. You cannot effectively do this with CSS only if javascript-positioning of the drop-down list is used for material design. As a result, I had to attach a function to a popup window inside, where I set a timeout of 200 ms, which calculates the desired position of the popup screen and moves it there. I also added a function to the controller to the window resize event so that it moves with the resize.

Ultimately, you need to use a timeout to get the development time of the material, to do it based on javascript, moving it, and then moving it yourself. I also use a trick to hide it while moving, so the user does not see the jump. This is a description of what I had to do in case someone tried to look like him.

Answer 2

Here you go - CodePen

Use the md-container-class attribute. From 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 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 entry seems to have the same problem: How can I create a submenu in the MaterializeCSS drop-down list?

Answer 4

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

To do this, you need to use the md-container-class attribute, for example:

 md-container-class="dropDown" 

inside the md-select tag. then you just need to create your own CSS for the declared class:

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

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

here is codepen

Answer 5

For people who have cdk-overlay (cdk-panel) with md-select.

Suppose you are using Angular 2, Typescript, Pug, and Material Design Lite (MDL) in a production environment.

The function that md-select styles work when clicked.

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 that overrides the construction of Lite (MDL) css materials

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