Override dropdown/overlay width in autocomplete, select and other components

[pleerock]

Most of options in practice do not fit width of inputs, e.g.

There are two options:

The most simple is to provide option to make dropdown/overlay width to be able to set it to "fixed"|"dynamic" or maybe dynamic with max width, e.g.

Second option is to expand hovered option with extra div with padding and white background with full width, it will be kinda outset.

If there are even hacky solutions of first approach can someone point me how to resolve it. Thanks.

[dgsmith2]

My workaround

<input type="text" ... #trigger="matAutocompleteTrigger">
...
<mat-autocomplete ... [appAutocompleteWidthHack]="trigger">...</mat-autocomplete>

@Directive({
    selector: 'mat-autocomplete[appAutocompleteWidthHack]'
})
export class AutocompleteWidthHackDirective implements OnInit {
    @Input() appAutocompleteWidthHack: MatAutocompleteTrigger;

    ngOnInit() {
        (this.appAutocompleteWidthHack as any)._getHostWidth = () => 'auto';
    }
}

[josephperrott]

Closing this issue as it does not follow the issue template. Please file a new issue that follows the template, which gives the team the information needed to investigate

[dgsmith2]

Does this impact the PR?

[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.}