How to configure md-select popup menu in Angular Material?

Question

I need to define a special class for some md-select popup menus (not for all). But I do not know how to do this.

Here is an example of typical usage code, and there is no place where I can define a class for the menu container that will appear.

                        <md-input-container md-no-float class="md-block defaultInputSelect filterType">
                            <md-select ng-model="value.filter_type" md-on-close="viewChanged()">
                                <md-option ng-repeat="(key, value) in filterTypes" value="{{value}}">
                                    {{filterTypesNames[key]}}
                                </md-option>
                            </md-select>
                        </md-input-container>

In fact, I want to change the width of the popup menu. By default, it is limited to the width of md-select.

Answer 1

Hi, please look at the next plunkr, the next selector seems to work just fine to work on the whole component

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

 <style type="text/css">
    md-input-container,
    md-input-container > * {
      width: 100% !important;
    }
  </style>

: ,

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

<style type="text/css">
   ._md-select-menu-container
    {
      width: 100% !important;
    }
  </style>

Final Edit: md-container- class= "myclass" md-select

https://plnkr.co/edit/sp7mKuaeztfAgtujARcw?p=preview

 <style type="text/css">
   .myclass
    {
      width: 100% !important;
    }
  </style>

<md-select md-container-class="myclass" ng-model="selectedItem" md-selected-text="getSelectedText()">
                <md-optgroup label="items">
                  <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
                </md-optgroup>
              </md-select>