Material: Styling md-autocomplete

[manish2535]

My App uses multiple md-autocomplete. One md-virtual-repeat-container is created for each md-autocomplete and inserted at the end of the body.

I want to style the position of each md-virtual-repeat-container differently but since there is no way for me to pass a special class or id to this element using the directive, I am not able to do this.

I can use the ordering to my advantage and use the CSS:nth-child to get the end result but that seems very hacky. Is there any way I can pass a Class to the main md-virtual-repeat-container element that gets generated?

Note: The md-menu-class parameter is useless in this case because it only adds the class in the inner ul element not on the parent element,

[kseamon]

If you use a custom template for your menu items, you could add an ng-class or ng-style to it, right?

[manish2535]

Yes but the md-autocomplete gets dynamically generated and appended to the body so that class or style will not make it through.

[aaronPMorabito]

I am running into this issue as well. I wanted to shrink the size of the md-autocomplete input with floating label to size it similarly to other md-input-container elements in the same row.

Messing with margins/padding will cause the menu/progress bar to be misaligned. The md-progress-linear is easy enough to re-position, but having access to the menu md-virtual-repeat-container parent element or passing it a class/id would be useful.

[manish2535]

any updates on this one?

[cornerbodega]

+1

[jensbodal]

Using information from this pull request I made a decorator to add to my app's config; the decorator allows an md-menu-container-class attribute to be added to the md-autocomplete directive which can then be used for styling. Plunker

[ibnYusrat]

+1

[cweise93]

Awesome jensbodal. Thank you. Works perfect.