7

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

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233
  • Is there a reason you're using `OverlayModule` instead of the Angular - Material `mat-dialog`? https://material.angular.io/components/dialog/overview (This being the standard for usking `cdk` items in Angular) – Z. Bagley Dec 16 '17 at 02:03
  • Because I'm trying to make a popover overlay/tooltip and not a dialog box persay – Armeen Moon Dec 16 '17 at 02:28
  • The dialog is supposed to be the all-browser standard for anything that requires more than a span for rendering in DOM. If all you want is text, then Material provides the `tooltip`. You can position the dialog to an element in the view w/ customization, and you can manipulate it many more ways (though the defaults are prettys tandard) – Z. Bagley Dec 16 '17 at 04:40
  • It isn't a tooltip either. https://joejordanbrown.github.io/material2-popover-demo/popover is something more that I'm looking for. – Armeen Moon Dec 16 '17 at 16:30

3 Answers3

21

The absolute positioning of the generated overlay container is defined in the .cdk-overlay-pane class, which is part of the angular material theme. You might have forgot to include a theme?

If so, add the following line to your style.css file (assuming you use an Angular CLI project). @import "~@angular/material/prebuilt-themes/indigo-pink.css";

cmonsqpr
  • 583
  • 6
  • 13
  • 1
    this answer helped me to focus on core problem: missing theme imports in styles.scss. I added `@use '@angular/material' as mat; //use tilda '~@angular/..... for angular <13` and `@import '@angular/material/theming'; //use tilda '~@angular/..... for angular <13` and `@include mat.core();` – niio Jun 07 '22 at 10:11
3

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;
}
Edric
  • 24,639
  • 13
  • 81
  • 91
  • 1
    HI Edric, I got the same example Matthew, but can't figure out how do assign the overlay to the same code ? I created a git repo https://github.com/frontruk/overaly-module/blob/master/src/app/modules/overlay-dialog/overlay-dialog.component.ts , if you could help that would be awesome – Chris Tarasovs Apr 14 '18 at 19:20
1

Inspired by niio's comment, I figured out I had not included the core part of angular material theming (Angular 15):

@use '@angular/material' as mat;
@include mat.core();

That put the select panel back to place.

Monkey Supersonic
  • 1,165
  • 1
  • 10
  • 19