How do I position the drop down of AngularJS Mater

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 select menu

Now try clicking on "Contribution 2" and deselect "All Contribution Types" then click out of the drop down then click again on the select menu. As you noticed, this is what you get

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

My question is how do I always position the drop down just below the select exactly just like the 1st screenshot no matter what I've selected first? I'm still new to AngularJS. Thanks!

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

Answer 1

Yeah it's the default behaviour. If you want to change the dropdown's position then you've to handle it using jquery to change its CSS property. And also have to take care that your dom manipulation executes after Material design js does. So by finding offset top of md-select element & subtracting approx. height of select (here 20px) you'll get css top for your dropdown which you can give it be selecting its class which made available by attribute md-container-class="my-container" So your code shall look like:

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

selclicked() function will carry out position change which is:

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

};

Here timeout should depend on how fast animations for material design implemented in your project & minimal time required to execute md js functions. Here's updated version of your plunker: http://plnkr.co/edit/4FSWeAC4Ae4iWfWSCzvG?p=preview

Update:

If you've restriction to use only javascript then you can achieve same thing of finding offset of those elements using Element.getBoundingClientRect() It has basic support for all the 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);

};

Here's working plunker link: http://plnkr.co/edit/DjFiWJD1FPFzEK0v7siG?p=preview