Material: autocomplete: add ability to set ID on md-virtual-repeat-container for custom CSS

[annnguyen]

Found a closed ticket that wasn't actually resolved: #4772

We need the ability to style our global search input field using md-autocomplete that is persistent throughout the site to be styled uniquely from any other autocomplete field we're using in various forms on various pages. The width of the element <md-virtual-repeat-container> is what needs to be overriden but there's no option available to do so.

Actual behavior:

• What is the issue?
  
  
  
  • There's no ability to set a unique ID to <md-virtual-repeat-container> of an <md-autocomplete> to do styling changes to the width of the dropdown list.
  
  
• What is the expected behavior?
  
  
  
  • Would like for there to be directive attribute md-menu-container-id to set ID of <md-virtual-repeat-container> element.
  
  

CodePen or Steps to reproduce the issue: *

• CodePen Demo: http://codepen.io/annnguyen/pen/NNomLo
• Details: Set md-virtual-repeat-container width to 80%, which is applied to all. There is no ability to set unique selectors to multiple md-autocomplete elements.

Angular Versions: *

• Angular Version: 1.5.0
• Angular Material Version: 1.0.8

Additional Information:

• Browser Type: Any
• Browser Version: Any
• OS: Any

[BevanR]

Do you want to specify the width of an <md-virtual-repeat-container> element that corresponds to some <md-autocomplete> elements, but not when it corresponds to other <md-autocomplete> elements?

My first thought was that you could specify the class in your <md-autocomplete> element and use that class in your selector. E.g. <md-autocomplete class="wide-options"> and md-autocomplete.wide-options md-virtual-repeat-container { width: 80%; }.

However I see now that is not possible because the <md-virtual-repeat-container> is not a descendant of its corresponding <md-autocomplete> but a direct child of the root element of the app, that gets absolutely positioned when it is visible.

There is a lot of unrelated code in your codepen. Could you reduce it to two <md-autocomplete> elements, one CSS property, and zero JavaScript (or perhaps just enough to populate the autocomplete options).

You might also consider making them different so that it is clear which one you want to change and which one you don't. E.g. "The blue one should be default width, the red one should be wider".

Finally, clearer steps to reproduce will help others understand what the problem is here. I find Gherkin steps/syntax (Given-And-When-And-Then-And) useful for this. E.g.;

Given I have two <md-autocomplete> elements with different classes on my page
When I want to override the layout for suggestions of one of them
Then I should be able to select just one <md-autocomplete> element from CSS
# FAILS: There is no selector which matches one options group but not the other.

[BevanR]

Both #8403 and #8397 solve this using slightly different approaches.

[annnguyen]

Updated #8397 pull request. Should be ready for review now.

[bersoriano]

Any news about this one? I'm having the same issue.

[jensbodal]

Just going to add this here as well. I made a decorator from other information to allow the ability to add a class to the md-virtual-repeat.

Link to Plunkr

[DallanQ]

Thank you @jensbodal! Exactly what I needed! Works perfectly.

[tyler-austin]

The docs currently say to use the attribute "md-menu-class" which will apply your class to the dropdown menu for styling. However, this does not work.

[Splaktar]

@tyler-austin For md-autocomplete, md-menu-class applies the class to the <ul> of the md-virtual-repeat that contains the options as <li> elements. It does not apply any class to the md-virtual-repeat-container.

[Splaktar]

Opened a new PR https://github.com/angular/material/pull/11194 to resolve rebase issues and address some review feedback. We'll try to get this merged into 1.1.9.