Feature request for autocomplete - more control over panel width

[jonbrock]

Bug, feature request, or proposal:

Provide an option to control the width of the panel, perhaps via css:
<md-autocomplete #auto="mdAutocomplete" panel-class="my-autocomplete-css">

Or if it could just expand to fit the dropdown content that would be nice.

What is the expected behavior?

Allow the autocomplete dropdown panel to be a different width than the associated input field.

What is the current behavior?

The dropdown panel is the same width as the associated input field, which cuts off long values. There doesn't appear to be a way to change the width. A class or style on the md-autocomplete tag is ignored. Wrapping the options in a div with a wider style simply adds a scrollbar to the dropdown rather than widening it.

What are the steps to reproduce?

http://plnkr.co/edit/cKRWeypQ1UmpIk3s2c1E?p=preview

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

Any situation where the dropdown options contain more information than what gets displayed in the text input. In my case, I'm using the dropdown as a list of search results. Each search result contains a name, an ID, a type, and several other fields to help the user select the appropriate result. But in the text box I just show the ID.

What I'd like is to make the dropdown wide enough to show all of the information in the search results, while the text input is narrower since it only shows the ID.

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

Latest version, Chrome, Firefox, IE, Edge

Is there anything else we should know?

[shaunak1111]

A simple hack by controlling the width by using .mat-autocomplete-panel class

.mat-autocomplete-panel {
width : 200px;
}

[willshowell]

Not sure if it would work for your use-case, but another option is to have the input expand upon focus. See the repro in #4146 for an example.

[sadplace]

I also need this.
I need the panel width to be auto, to grow or shrink as the values inside. This way i can always see and doesn't get cut.
So, any news about this?

[arlowhite]

I would set min-width rather than width. As willshowell mentioned, your other option is to expand your MdInput/MdInputContainer width when it's focused, which expands the autocomplete width.

body .mat-autocomplete-panel {
  min-width : 200px;
}

[ginvaell]

I also need this, as I need some panel to fit their content and some to fit input width, so the resolution above does not suit for me as it affects all autocomplete panels in project.

I came up with a small work around, but it works with a slight delay.

import {Directive, DoCheck, ElementRef, Input} from '@angular/core';
import {MdAutocomplete} from '@angular/material';

@Directive({
  selector: 'md-autocomplete[appAddClassToAutocomplete]',
  providers: [MdAutocomplete]
})
export class AddClassToAutocompleteDirective implements DoCheck {
  @Input() appAddClassToAutocomplete: string;
  private panel: ElementRef;

  constructor(private mdAutocomplete: MdAutocomplete) {}

  ngDoCheck(): void {
    const panel = this.mdAutocomplete.panel;
    if (panel && !this.panel) {
      this.panel = panel;
      panel.nativeElement.parentElement.classList.add(this.appAddClassToAutocomplete);
    }
  }
}

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