How can I post a drop down list of AngularJS searchable content?

Question

Try running the code I made in plunker here http://plnkr.co/bvysoi

<div ng-controller="dropdownController" class="md-padding" ng-cloak> <div layout="row"> <md-input-container> <md-select md-container-class="my-container" ng-model="selected" md-selected-text="displaySelected()" multiple> <md-optgroup> <md-option ng-value="data.label" ng-repeat="data in datas" ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}}</md-option> </md-optgroup> </md-select> </md-input-container> </div> </div> 

As you can see, this is what you see when you click on the selection menu

Now try clicking "Contribution 2" and deselect "All types of tabs", then click on the drop-down list and click again in the selection menu. As you noticed, this is what you get

The down position is moved. I think this is the default behavior, so I wanted to change this.

My question is, how do I always position the dropdown below exactly the same as the first screenshot, regardless of what I chose first? I am still new to AngularJS. Thanks!

EDIT: I am not allowed to use jQuery or any other libraries. I am limited only to AngularJS

Answer 1

Yes, this is the default behavior. If you want to change the dropdown, you must handle it with jquery in order to change its CSS property. It is also necessary to make sure that your manipulation with your execution is performed after creating the js material. Therefore, finding the offset of the top of the md-select element and subtracting approx. height of select (here 20px) you will get css top for your dropdown, which you can give it by selecting its class, which was available to the md-container-class="my-container" attribute So, your code will look like this:

 <div layout="row"> <div class="select" ng-click="selclicked()"> <md-input-container> <md-select md-container-class="my-container" ng-model="selected" md-selected-text="displaySelected()" multiple class="my-md-select"> <md-optgroup> <md-option ng-value="data.label" ng-repeat="data in datas" ng-click="clicked(datas, data)" ng-selected="data.selected">{{data.label}} </md-option> </md-optgroup> </md-select> </md-input-container> </div> </div> 

The selclicked () function will perform a position change that:

 $scope.selclicked = function(){ var containerTop = $(".my-md-select").offset().top - 20 + "px"; setTimeout(function(){ $(".my-container").css({'top':containerTop}); }, 50); }; 

Here, the wait time should depend on how fast animations for material design are implemented in your project and the minimum time required to execute the md js functions. Here is the updated version of your plunker: http://plnkr.co/edit/4FSWeAC4Ae4iWfWSCzvG?p=preview

Update:

If you have a restriction on using javascript only, you can achieve the same as finding the offset of these elements using Element.getBoundingClientRect() . It has basic support for all browsers. So your function might look:

 $scope.selclicked = function(){ var bodyRect = document.body.getBoundingClientRect(); var myElement = document.getElementsByClassName('sel'); var containerTop = myElement[0].getBoundingClientRect().top - bodyRect.top + 'px'; var myContainer = document.getElementsByClassName('my-container'); setTimeout(function(){ angular.element(myContainer).css({'top':containerTop}); }, 50); }; 

The plunker link works here: http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview