CODEWITHSUNDEEP
javascriptangulartypescriptangular-cdk
PepeW
PepeW

Reputation: 607

Angular CDK Menu opens at the bottom of the page

I've implemented the CDK Menu from the documentation (doc) in my app.

Here's what I've done:

  1. Install the CDK:
    npm i @angular/cdk

  2. Import the menu cdk in app.module.ts and use it in the "imports" section:
    import { CdkMenuModule } from '@angular/cdk/menu'
    imports: [BrowserModule, CdkMenuModule]

  3. Create the menu in my app.component.html

    <button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
<ng-template #menu>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Refresh</button>
    <button class="example-menu-item" cdkMenuItem>Settings</button>
    <button class="example-menu-item" cdkMenuItem>Help</button>
    <button class="example-menu-item" cdkMenuItem>Sign out</button>
  </div>
</ng-template>
<hello-world></hello-world>

The problem is that when I click on the button, the menu opens at the bottom of the page instead of just under the button.

Here's a Stackblitz that shows the problem: https://stackblitz.com/edit/f1y9wh
I've followed this example from the documentation (their stackblitz works correctly): menu-with-standalone-trigger

Upvotes: 0

Views: 1211

Answers (1)

PepeW
PepeW

Reputation: 607

Ok so if anyone have this problem, you have to import this in your styles.scss:

@import '@angular/cdk/overlay-prebuilt.css';

It's coming from the CDK Overlay: https://material.angular.io/cdk/overlay/overview
But somehow it's not written in the CDK Menu documentation that you have to import this CSS...

Upvotes: 8

Related Questions