angularoverlayangular-material2angular-cdk

Angular CDK's OverlayModule, cdk-overlay-pane will not set position to absolute?

I'm using Overlay Module of Angular's CDK. And I just cannot find the way to add position: absolute to the overlay? The module will receive a top and a left position that matches the connected element position but the overlay will not receive position: absolute. I'm unable to add position absolute due to ViewEncapsulation. and I'm really struggling to find a solution.

Question: How can I use cdkOverlayOrigin and cdkConnectedOverlayOrigin

Module: 

import { OverlayModule } from '@angular/cdk/overlay';



@NgModule({
  imports: [
    OverlayModule,
  ],
  declarations: [ MenuComponent ],
})
export class MenuModule {
}

Component:

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: [ './menu.component.scss' ],
})
export class MenuComponent {
}

Template:

 <div style="margin: 0 auto; width: 30%">
  <h1 cdkOverlayOrigin
      #checkListTrigger="cdkOverlayOrigin"
      (click)="checkListOpen = !checkListOpen"
      style="background: blue">Overlay Origin</h1>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="checkListTrigger"
    [cdkConnectedOverlayOpen]="checkListOpen">

    <ng-container>
      <p>Why you no positioned on h1 element</p>
    </ng-container>

  </ng-template>
</div>

See how it's off center enter image description here

If I add position: absolute it now works as intended? enter image description here

Solution

  • This is described in the API documentation. You can specify a panel class for the overlay pane.

    Here's some code:

    const overlay = overlay.create({
    panelClass: 'pos-absolute'
});

    .pos-absolute {
    position: absolute;
}