0

i'm new to Angularjs Material so maybe this is something obvious yet it seems i can't figure it out.

i have a multiple choice drop down menu which shows only 4 options when initially clicked on and the rest can be viewed/accessed by scrolling down. I'm trying to expand that view to another static number (e.g. to fit 8 options without scroll).

i found very similar question asked before:

Make multiple-select to adjust its height to fit options without scroll bar

however, it seems not to have any effect neither with "size" nor "ng-size"

here is my example:

<md-input-container>
    <label>Providers</label>
    <md-select ng-size="10" ng-model="vm.selectedProviders" ng-change="vm.prov()" multiple>
        <md-optgroup label="Providers">
            <md-option ng-value="provider.namep" ng-repeat="provider in vm.providers">{{provider.namep}}</md-option>
        </md-optgroup>
    </md-select>
</md-input-container>
user3363640
  • 11
  • 1
  • 6

1 Answers1

0

Looking at the documentation of md-select, there doesn't seem to be an attribute that specifies the number of options to show.

So the other possible way is to change the maximum heights set by default in AngularJS Material. They're set like this:

md-select-menu, md-select-menu md-content {
    max-height: 256px;
}

For me, it displays 5 options by default (not 4). So, I added this to my CSS:

md-select-menu, md-select-menu md-content {
    max-height: 385px;
}

And it made all md-select tags fit 8 options instead of 5. The number doesn't have to be the same for you, so play with the height until you're satisfied.

Hope that helps.

Omar Einea
  • 2,478
  • 7
  • 23
  • 35