Creating Overlay declaratively - incorrect positioning

[jackwootton]

Bug, feature request, or proposal: Bug

Following the documentation for CdkConnectedOverlay I created an overlay with a hard-coded cdkConnectedOverlayWidth and cdkConnectedOverlayHeight

<ng-template
    cdkConnectedOverlay
    cdkConnectedOverlayHeight="100"
    cdkConnectedOverlayWidth="100"
    [cdkConnectedOverlayPositions]="positions"
    [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="open">
	<div class="cdk-overlay-pane">
		Hello Component!
	</div>
</ng-template>

In the same component was the cdkOverlayOrigin - which toggles the overlay visibility:

<mat-card cdkOverlayOrigin #trigger="cdkOverlayOrigin">
	<button mat-button (click)="open=!open">Toggle Overlay</button>
</mat-card> 

The component defines positions:

private originPos: OriginConnectionPosition = {
    originX: 'start',
    originY: 'top'
};
private overlayPos: OverlayConnectionPosition = {
    overlayX: 'start',
    overlayY: 'top'
};

private position: ConnectionPositionPair = new ConnectionPositionPair(this.originPos, this.overlayPos, 0, 0);
public positions: ConnectionPositionPair[] = [this.position];

And ScrollStrategy is a noop:

  constructor(sso: ScrollStrategyOptions) {
    this.scrollStrategy = sso.noop();
  }

All of this lives within a <hello></hello> component (<br> to force scrolling):

<hello></hello>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

What is the expected behavior?

• A cdkConnectedOverlay should be positioned at the top-left of the mat-card according to cdkConnectedOverlayPositions.
• The cdkConnectedOverlay should have a width of 100px and height of 100px.

What is the current behavior?

cdkConnectedOverlay is incorrectly positioned with the component.

The overlay is positioned below the <br> elements.

What are the steps to reproduce?

StackBlitz: declaratively-cdk-overlay

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

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

angular-cdk: 5.2.4
angular-material: 5.2.4
angular-core: 5.2.8

Is there anything else we should know?

I am facing the exact same problem. But i am not using material, just the cdk.

Versions for me are:
angular-cdk: 5.2.4
angular-core: 5.2.9

[crisbeto]

I can see the issue in your example, but I wasn't able to reproduce it against Material 6.0. Closing the issue for now and it can be reopened if it doesn't end up being fixed in 6.0 final.

I did try it with angular-cdk: 6.0.0-rc.2 and problem persists.

[crisbeto]

Actually, your issue comes from the fact that you didn't include all the necessary structural CSS (Material was logging out a warning as well). Here's a working fork of your example.

So, in my case, i wasn't using material at all so there were no warning messages. Anyway, it's clear that for the cdk to work we need to include the structural css as @crisbeto mentioned above and explained here in the docs .

What i don't understand is why is @angular/cdk depending on anything from @angular/material. Isn't it supposed to be the other way around? This dependency doesn't even appear in the @angular/cdk's package.json.

Not sure if i am missing something or i should open a different ticket here.

It seems that you can also include the necessary css from @angular/cdk/overlay-prebuilt.css for when you are not using material.

Docs don't mention this but there is also this #8717.

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