I need to define a special class for some md-select's popup menus (not to all). But I have no idea how to do that.

Here is a code sample of typical usage and here is no place where I can define a class for 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>

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

I need to define a special class for some md-select's popup menus (not to all). But I have no idea how to do that.

Here is a code sample of typical usage and here is no place where I can define a class for 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>

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

• javascript
• angularjs
• angular-material

• Could you clarify what exactly you want to do? Maybe then we can point you in the right direction – johan Commented May 18, 2016 at 5:40
• @johan, I want to change the width of popup menu. Edited the question. – splash27 Commented May 18, 2016 at 5:51

1 Answer 1

Hi there please look at the following plunkr, the following selector seems to work fine to affect the whole ponent

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

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

Edit: Here you go, this will only affect the select dropdown

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

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

Final Edit: Simply add the md-container-class="myclass" directive to your 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>