CODEWITHSUNDEEP
angularangular-material2
Daniel
Daniel

Reputation: 213

Angular mat-select number of shown options

I have a mat-select element with a fix number of mat-option elements. To see the last element i have to scroll the list. Is it possible to expand the area so i can see the last element without scrolling?

<mat-form-field appearance="outline">
    <mat-select>
        <mat-option [value]="0">Automatically</mat-option>
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="-1">All</mat-option>
    </mat-select>
</mat-form-field>

[What i have]

[What i want]

Thanks in advance!

Solution:

I finally solved it that way:

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

and

.mat-select-panel{
  max-height: <your new height>
}

in component related .scss-file

Upvotes: 5

Views: 7717

Answers (3)

Ionut Breaz
Ionut Breaz

Reputation: 33

The mat-selector options are displayed in a overlay div that is not a child of your component. The style needs to be changed globally in styles.scss. So add in your styles.scss:

.mat-select-panel{
    max-height: 600px !important;
}

This will affect all mat-selectors in the project so if you want to apply the style to just one mat-selector add a class to mat-selector and define the CSS in styles.scss just for that class.

Using ViewEncapsulation.None is not recommended because all your component styles will be applied to the whole project and this can lead to bugs difficult to track.

Upvotes: 2

Jscti
Jscti

Reputation: 14440

If you have a fixed number of option, the cleanest way to go would be to guess how many height you require and :

::ng-deep() .mat-select-panel {
    max-height: <your new height>
}

That way, the select box will appear cleanly with all the border-shadows and all

Upvotes: 2

Chellappan வ
Chellappan வ

Reputation: 27303

Add ViewEncapsulation.None to and add csss to customise your mat-select

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

add this css property to your .mat-select-panel

.mat-select-panel{
  overflow:visible !important;
}

check this example:https://stackblitz.com/edit/angular-swkgk4

Upvotes: 1

Related Questions