Autocomplete renders dropdown outside the app-root

[ArtemBulat]

Bug, feature request, or proposal:

For some reason autocomplete renders drop down with suggestions outside the app-root, just at the end of body.
I have found the same issue description here : https://stackoverflow.com/questions/47567179/material-angular-select-dropdown-renders-totally-outside-app-root?answertab=votes#tab-top

What is the expected behavior?

It should render just below parent control

What is the current behavior?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-byq8u1?file=app%2Fapp.component.html

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

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

Angular 5, Material 5.2.4

Is there anything else we should know?

[EdricChan03]

@ArtemBulat That's because you're missing a theme.

You can either declare a theme, or add the following line to styles.scss:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

[ArtemBulat]

Thanks for the response!

[crisbeto]

Closing as a non-issue.

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