CODEWITHSUNDEEP
angularangular-cdk
Karlos1337
Karlos1337

Reputation: 549

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

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

Upvotes: 3

Views: 6384

Answers (3)

Mounir bkr
Mounir bkr

Reputation: 1635

1- run in your terminal:

npm i @angular/cdk

2-check in "node_modules > @angular > cdk > ...." , if you find "cdk folder". 2- in your style.css or style.scss, add this:

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

and it will work

Upvotes: 0

Rajeesh
Rajeesh

Reputation: 27

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

Upvotes: 1

blastncast
blastncast

Reputation: 136

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.

Upvotes: 12

Related Questions