@angular/cdk/overlay Global and centered position don't works

Question

I'm trying to use the new @angular/cdk but the position strategy seems not works, only want to show a modal centered with a backdrop, I know that I can set a class to the pane and set there the fixed positioning but, in that case, I don't know for what is the positionStrategy configuration and I would like to be as fittted as possible to the @angular/cdk features.

Here the example: https://stackblitz.com/edit/angular-9nthad?file=src%2Fapp%2Fhello.component.ts

Answer 1

I ran into this problem myself. If you are using the CDK by itself, without angular material, then you're missing the stylesheet that handles a lot of the positioning. Inside of the cdk, there is an 'overlay-prebuilt' CSS file that you need to import in order for it to render correctly.

@import "~@angular/cdk/overlay-prebuilt.css";

Just make sure that you don't import it into an encapsulated component. You want it in the global css/scss file.

Answer 2

After installing CDK, import "overlay-prebuilt" into your global styles file.

> npm i @angular/cdk

> @import "~@angular/cdk/overlay-prebuilt.css";

You can find the full documentation here Angular material CDK