Request : md-option autoHeight support for <md-select> and/or <md-autocomplete>

[gedclack]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

option to choose between fixed height or auto-height to fit md-option's contents.

What is the current behavior?

md-option's height is fixed to 48px

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

its very helpful and descriptive to have an additional text (maybe in smaller font-size) to show more information in the options, rather than having one line of text which only show one information.

Currently on :

Angular material 2.0.0-beta.3

[willshowell]

Possible duplicate of #3883

[jelbourn]

Potentially doable for autocomplete, would be much more difficult for select.

[gedclack]

@jelbourn yes it will be great to have it for autocomplete, I believe many Web Apps will rely heavily on autocomplete to select and filter hundreds of options (and I don't think md-select is the right component for that -- since it has no textbox to type and find options)

[fxck]

@gedclack you are only saying that under the assumption that md-select can not do that, which it certainly can and there is pending (for two months) PR for it already #3211

In fact, I think autocomplete is definitely NOT the right component for selecting, that's what select is for, as autocomplete doesn't by default (and currently not even with option) enforce the selection to be the one of the list, it simply does the completion.

Also @jelbourn it will only be more difficult if you do that the actual "autoheight", if you allow the user to set the default (fixed) height, instead of hardcoding it, or do something like md-line on md-list, it shouldn't be difficult at all.

and

Based on the material design spec, we don't see multi-line options for being permitted

I don't see it being prohibited either, but if it is the case, allowing the user to set the fixed height of all items should still be considered.

[gedclack]

@fxck well it will be great then 👍 , I am just assuming with the current version of Material2.

@jelbourn IMHO (and with current version of Material2), if you add this #3334 that will be the solution for #3211

[PeS82]

I believe having the possibility to use ng-template instead of md-option in options list for md-autocomplete would be nice. Please?

[gedclack]

@jelbourn is this resolved in the recent updates?
*haven't touch angular projects for a few weeks now..

[ksmirnoff]

@jelbourn is there an ETA for providing multiline support for autocomplete suggestion panel?

[amitport]

I'm using this workaround and it works fine for now:

mat-list.<<my-list-class>> ::ng-deep  .mat-list-item-content {
  height: <<new height>>;
}

[fxck]

That's not gonna work. The height is internally hardwired so they can calculate position of the active item upon opening. Overriding the height just in css is going to mess it up.

[amitport]

@fxck it worked well enough for my use case. That being said, it's definitely not a solution and this issue should be open.

In any case, a have another workaround that should play nicer with other css rules:

<mat-list-item *ngFor="<<let something of somethings>>">
  <div style="height: <<my-height>>; width: 100%;">
    <span matLine></span><span matLine></span><span matLine></span><span matLine></span>
    <<my-line-content>>
  </div>
</mat-list-item>

(material applies 'mat-multi-line' class when there are more than 3 matLine) (IMHO we probably need something like MatFitContent directive on mat-list-item that does the same)

[fxck]

Also apparently you are talking about mat-list, while this issue is about mat-autocomplete and mat-select.

[amitport]

@fxck ohh... you're right, sorry, I thought I was writing in #4114 (which should be re-opened IMO)

[faelmorais]

Any updates on this function?

[charlie-elverson]

This takes care of my needs for displaying multiple lines of content in a single mat-option.

<mat-option *ngFor="let emp of empDataSource | async" style="height: 90px;" [value]="emp"> {{emp.searchDisplay}} <br> Building: {{emp.thing1}} <br> Room: {{emp.thing2}} </mat-option>

[leogoesger]

Could someone provide an update on this? What would the proper syntax for using mat-option if
displayed value is too long?

[martin-dmtrv]

Adding this style to mat-option appears to solve the problem for us:
style="min-height: 48px; line-height: normal; height: auto; padding: 10px 20px;"

So final component should like something like:

<mat-form-field class="w-100">
    <input matInput placeholder="Role" aria-label="Role" [matAutocomplete]="auto" [formControl]="roleCtrl">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let Role of Roles | async" [value]="Role.name" style="min-height: 48px; line-height: normal; height: auto; padding: 10px 20px;">
            <span>{{Role.name}}</span><br />
            <small class="text-grey">{{Role.description}}</small>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

[striky1]

I'm using @martin-dmtrv solution but with these styles:

min-height: 48px; line-height: 1.15; height: auto; padding: 8px 16px; white-space: normal;

Which more following base Material styles.

[Jadamae77]

Any updates?

[gedclack]

for now I'm using similar workaround, adding this css below and using it on my AutoComplete's <mat-option>

.multiline-auto-complete-options {
	height: auto !important;
	line-height: normal !important;
	padding: 8px 16px !important;
}

[crisbeto]

This is supported in the MDC-based version of mat-autocomplete and mat-select from @angular/material-experimental. I'll close this issue, because porting the feature back to the non-MDC version won't be practical.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}