[Mat-select] Support for dense list of mat-option's

Bug, feature request, or proposal:

I would like for you to add an attribute like with mat-list, that makes the list items denser. So basically <mat-select dense></mat-select>. If I try to reduce the height of the rows via css it gets all kinds of messed up with scrolling.

What is the expected behavior?

For the scrolling to work as it does with non default list item heights in mat-select for the mat-option’s.

What is the current behavior?

If I press the letter I want to get down to, I end up in the wrong place if I change the height via css. You can see this in the image below. In this case I pressed the letter “U”.

This issue also occurs when I have selected something further down the list, and then re-clicks the mat-select element. Then I end up in the wrong place in the list. This is not too surprising, as I suspect that these are related to the each other.

The number of items in this list is 429 items.

What are the steps to reproduce?

.mat-option {
    line-height: 24px !important;
    height: 24px !important;
}

What is the use-case or motivation for changing an existing behavior?

My customer “demands” me to make it have less “air” as he calls it. And I too personally, would love to have the option. As I kind of agree that it shows less information per pixel (if I can say that).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All versions from v5 and up to me and all the regular browsers (Edge, Firefox, Chrome, Safari). For OS’s I’ve tested in macOS and Windows. I expect this to be the issue on Linux, iOS and Android also.

My current package versions are:

Angular CLI: 6.0.3
Node: 9.9.0
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cdk                      6.1.0
@angular/cli                      6.0.3
@angular/material                 6.1.0
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Is there anything else we should know?

I would be truly greatful if this were something that were to be implemented.

[ikourfaln]

+1

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn’t collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular’s scope, we’d encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.